Hover-Menü funkioniert nicht richtig...

[Toni]

Hallo,
ich habe mir ein Menü zusammengebastelt, bei dem, wenn ich über einen Menüpunkt gehe, ein Untermenüpunkt aufgeht. Doch wenn ich das Menü berühre, passiert das schon.... Irgendwo muss ein Fehler sein, aber ich weiß nicht wo.
Hier der Css-Code zum Menü:

  
#navi {  
   width:200px;  
   text-align:left;  
   margin-top:10px;  
   margin-bottom:0px;  
   margin-left:20px;  
   margin-right:15px;  
 }  
  
 #navi ul {  
   list-style:none;  
 }  
  
 #navi li {  
   background-color:green;  
   border-top:1px black solid;  
   border-left:25px orange solid;  
   border-bottom:1px red solid;  
   border-right:2px blue solid;  
   margin-top:2px;  
   padding-top:8px;  
   padding-bottom:8px;  
   padding-left:8px;  
   padding-right:8px;  
   border:2px dotted lightgreen;  
 }  
 #navi li ul {  
 display: none;  
}  
 #navi:hover li ul {  
 display: block;  
}  

Und hier das Menü/der HTML-Code:

  
<div id="navi">  
   <ul>  
    <li>  
   <a href="index.htm">Startseite</a>  
  <ul id="Untermenue">  
     <a href="Seite1.htm">Unterpunkt1</a>  
  </ul>  
  </li>  
    <li>  
   <a href="Seite2.htm">Seite2</a>  
  </li>  
   <li>  
   <a href="Seite3.htm">Seite3</a>  
  </li>  
  <li>  
   <a href="Seite4.htm">Seite4</a>  
  </li>  
 </ul>  
</div>  

Wäre klasse, wenn jemand meinen Fehler finden und mir ihn mitteilen könnte.

Mit freundlichen Grüßen
Toni