Для начала ваш HTML-код недействителен. Вложенный элемент ul должен содержаться внутри li. Кроме того, вы не можете повторить nav_mid1 в качестве идентификатора. Вам нужно будет использовать класс для нескольких элементов.
Изменение разметки и CSS на что-то следующее решит вашу проблему. Обратите внимание, что я добавляю отступы слева от вложенного UL, поскольку это, очевидно, подгруппа 'Colors'.
<ul id="nav_top">
<li id="nav_top1"><span class="heading"><a href="comp5.html">Styles</a></span></li>
<li id="colors"><span class="theoneclicked"><a href="colors.html">Colors</a></span></li>
<li>
<ul id="nav_mid">
<li class="nav_mid1">
Blue
</li>
<li class="nav_mid1"> Orange</li>
<li class="nav_mid1 last">Green</li>
</ul>
</li>
<li id="images"><span class="nav">Images</span></li>
</ul>
CSS
ul#nav_top {
width: 100px;
display: block;
list-style: none;
}
ul ul {
padding-left: 10px;}
ul#nav_top li {
border: 1px solid black;
}
li#nav_top1, li#colors {
display: block;
}
ul#nav_mid li {
border-width: 0 0 1px 0;
}
#nav_mid li.last {
border-bottom: none;
}
a {
text-decoration:none;
}