CSS display Funktion

[Johann]

Hallo,

ich bin gerade dabei mir eine horizontale Menüleiste mit "DropDown Funktion" zu bauen.

Hier erstmal der Code:

  
<style type="text/css">  
#nav{padding:0; margin:0; float:left; font:16px Tahoma;}  
#nav li{display:inline;}  
#nav li a{background:#0000FF; padding:8px 11px; float:left; color:#FFFFFF; text-decoration:none;}  
#nav li a:visited, #nav li a:active{color:#FFFFFF;}  
#nav li a:hover{color: #FFFFFF; text-decoration:underline;}  
#nav li ul{display:none;}  
#nav li ul:hover{display:block;}  
</style>  
  
<div>  
	<ul id="nav">  
		<li><a href="#">Link 1</a></li>  
		<li><a href="#">Link 2</a></li>  
		<li><a href="#">Link 3</a>  
			<ul>  
			<li><a href="#">AAA</a></li>  
			<li><a href="#">BBB</a></li>  
			<li><a href="#">CCC</a></li>  
			</ul>  
		</li>  
	</ul>  
</div>  
  
<script type="text/javascript">  
  var nav = document.getElementById("nav").getElementsByTagName("ul");  
  for (i=0;i<nav.length;i++) {  
    nav[i].setAttribute("id","nav"+i)  
    if (nav[i].parentNode.nodeName == "LI") {  
      nav[i].parentNode.onmouseover = function () {  
        this.lastChild.style.display = "block";  
      }  
      nav[i].parentNode.onmouseout = function () {  
        this.lastChild.style.display = "none";  
      }  
    }  
  }  
</script>  

Das Problem ist, wenn ich über den Link 3 mit der Maus gehe, erscheinen die Untermenü's nebeneinander neben Link 3. Ich möchte es aber unter Link 3 Untereinander haben. Wie schaffe ich es?

Viele Grüße
Johann