Wie erstelle ich eine Trennlinie in der Subnavigation?

[G_Note]

Hallo Leute,

ich habe eine Navigationsleiste erstellt und würde gern in den Submenüs noch Trennlinien haben.
Ich habe es schon mit folgendem ausprobiert:

CSS
 ~~~css .trennlinie {
   border-top: 1px solid black;
 }

  
und dann in den body-teil so in die betroffenden Subnavigationen (li-Tags) eingefügt:  
<li class="trennlinie">Beispiel</li>  
  
Da war dann das Problem, dass ich nur jeweils den ersten il-Tag benutzen konnte, die restlichen li-Tags wurden zwar angezeigt, aber ich konnte nicht drauf klicken.  
Sobald ich versucht habe auf einen untergelegenden li-Tag zu klicken, ging die Subnavigation zu.  
  
  
Dann habe ich noch "border-top: 1px solid black;" direkt in meinem Navigationscode eingefügt.  
Dann waren aber oberhalb der li-Tags überall Trennlinien.  
Was ja auch so sein soll, aber dann ist zwischen dem ul-Tag und dem erstem li-Tag auch eine Linie.  
Dort soll aber keine sein.  
  
Hier ist mein CSS-Code:  
  
~~~css
  
/* Navigationsleiste */  
  
a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}  
  
	#nav {background:#31b6e7; height:28px; font:normal 15px/28px arial, verdana, sans-serif; width:900px; margin:0 auto; position:relative;}  
	#nav ul {margin:0; padding:0; list-style:none;}  
	#nav ul.menu {position:absolute; overflow:hidden;}  
	#nav .menu .level1-li {float:left; width:150px; margin-top:-300px;}  
	#nav .menu a {display:block; width:150px; text-decoration:none; text-align:center; color:#fff;}  
	#nav .menu a.level1-a {position:relative; float:left; margin-right:-149px; margin-top:300px;}  
	#nav .menu .sub {background:#0099cc; float:left; margin-top:-28px; padding-top:28px;}  
	#nav .menu .sub a {background:#f8f8f8; color:#000000; position:relative; margin-right:-1px;}  
	#nav .menu a:hover,  
	#nav .menu a:focus,  
	#nav .menu a:active {background:#7fcde9; margin-right:0;}  

Und hier der HTML-Code:

~~~html

/* Tags */
                        <div id="nav">
<ul class="menu">
<li class="level1-li"><a class="level1-a" href="#url">Startseite</a></li>
<li class="level1-li"><a class="level1-a" href="#url">News</a>
<ul class="sub">
<li><a href="#url">Android</a></li>
<li><a href="#url">Apps</a></li>
<li><a href="#url">Spiele</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">Apps</a>
<ul class="sub">
<li><a href="#url">Alle Apps</a></li>
<li><a href="#url">Spiele</a></li>
<li><a href="#url">Hintergr&uuml;nde</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">Cheats/Hacks</a>
<ul class="sub">
<li><a href="#url">Apps</a></li>
<li><a href="#url">Tutorials</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">Tutorials</a>
<ul class="sub">
<li><a href="#url">Cheats/Hacks</a></li>
<li><a href="#url">Andere Tutorials</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#url">Bilder</a></li>
</ul>
</div>