Doppelter border bei gefloateter Navi

[Willi]

Hallo,

Ich habe heute noch eine CSS-Frage an die Profis hier :)
Ich habe eine Navigation in einer ungeordneten Liste (ul) mit Listenpunkten (li) welche ich jeweils immer links floate, damit ich eine vertikale Liste bekommen. Jeder Listenpunkt hat eine "doppelte" Linie (das li-Tag hat eine Eigenschaft border, genauso wie die Links innerhalb des Listenpunktes [li a]).
Das funktioniert auch alles ganz gut, bis auf den aktiven Listenpunkt, links und rechts von ihm ist geht die Linie bis nach ganz unten, obwohl sie schon da aufhören sollte, wo sie auf die andere Linie trifft.
Okay, ist vielleicht nicht so gut erklärt, aber schaut es euch mal an: hier

Kann mir jemand erklären woran das liegt?
Und wie ich es beheben kann?

Grüße,
Willi

Der Quellcode:
CSS:

  
.Navi { margin-top: 5px; clear: both;width: 100;}  
.Navi ul {  
 margin: 0;  
 padding: 0 0 0 10px;  
}  
.Navi li {  
 list-style: none;  
 margin-right: 3px;  
 float: left;  
 border-width: 1px 1px 0px 1px;  
   border-color: #999;  
   border-style: solid;  
}  
.Navi li a {  
 text-decoration: none;  
 padding: 2px 5px 3px 5px;  
 display: block;  
   color: #666;  
 border-style: solid;  
   border-width: 1px 1px 0 1px;  
   background-color: #e8e8e8;  
   border-color: #fff;  
}  
.Navi li.activeNavi a {  
 border-bottom: 0px;  
 padding-bottom: 5px;  
   color: #fff;  
   background-color: #777;  
   position: relative;  
   z-index: 0;  
}  
.Navi li a:hover {  
   color: #333;  
   background-color: #fff;  
}  
.Navi li a:focus {  
   color: blue;  
}  
.Navi li.activeNavi a:hover {  
   color: #fff;  
   background-color: #777;  
}