peddaa: Listennavigation - letzter Listenpunkt springt

Beitrag lesen

Mahlzeit!

ich hoffe Ihr habt ne Lösung für mich.

Mein Problem:

Kämpfe gerade nach jahrelanger HTML-Abstinenz mit einer horizontalen Navigationsstruktur.

4 Menüpunkte und nur der dritte hat noch Unterpunkte.

Hab ich alles mit ner Liste "gelöst". Jetzt springt aber bei hover über dem 3. Punkt der 4. ständig zur Seite.

Warum kann ich mir ungefähr vorstellen, hab aber überhaupt keine Lösung dafür.

Was mach ich falsch?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
body {  
margin:0px;  
padding:0px;  
}  
#navi ul {  
margin:0px;  
padding:0px;  
list-style:none;  
text-indent:0px;  
}  
#navi ul li{  
float:left;  
margin-right:20px;  
}  
#navi li ul {  
display:none;  
}  
#navi li:hover ul {  
display:block;  
}  
#navi ul a {  
font-family:Arial, Helvetica, sans-serif;  
font-size:12px;  
text-decoration:none;  
text-transform:uppercase;  
color:black;  
}  
#navi ul a:hover {  
color:red;  
}  
#navi li ul a {  
font-size:9px;  
}  
</style>  
</head>  
  
<body>  
<div id="navi">  
  <ul>  
  <li><a href="#">Start</a></li>  
  <li><a href="#">Untitled1</a></li>  
  <li><a href="#">Untitled2</a>  
  <ul>  
  <li><a href="#">Subnavigation1</a></li>  
  <br /><li><a href="#">Subnavigation2</a></li>  
  <br /><li><a href="#">Subnavigation3</a></li>  
  <br /><li><a href="#">Subnavigation4</a></li>  
  <br /><li><a href="#">Subnavigation5</a></li>  
  <br /><li><a href="#">Subnavigation6</a></li>  
  </ul></li>  
  <li><a href="#">Untitled3</a></li>  
  </ul>  
</div>  
</body>  
</html>  

Greetz, Peddaa