menu problem

[Xtazy]

Hey! I have a problem with my web site's menu. I don't know if I should have posted this in the Javasccript forum, but well...So, here's the problem: I'm working on a web site with Rocky Balboa, so I made up a menu for it. It works just fine in Firefox, but now I see that if I open the menu with IE it's totally messed up. The options have a large space between them. And for the menu I used some Javascript so that when I put the mouse over some of the options, it should open a palate of some new options. Here's the code:

<style type="text/css">ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	}ul li {	position: relative;	}li ul {	position: absolute;	left: 149px;	top: 0;	display: none;	}ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	border-bottom: 1px solid #ccc;	}li:hover ul { display: block; }</style><script type="text/javascript">startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace»	(" over", "");   }   }  } }}window.onload=startList;</script><ul> 	<li><a href="index.html">Home</a></li> 	<li><a href="#">News</a> 	  <ul> 		<li><a href="#">Sly the Man</a></li> 		<li><a href="#">Movies</a></li> 	  </ul> 	</li> 	<li><a href="gallery.html">Gallery</a></li>	<li><a href="">The Movies</a> 	  <ul> 		<li><a href="#">Rocky</a></li> 		<li><a href="#">Rocky II</a></li> 		<li><a href="#">Rocky III</a></li> 		<li><a href="#">Rocky IV</a></li> 		<li><a href="#">Rocky V</a></li> 	<li><a href="#">Rocky Balboa</a></li> 	</ul> 	</li>  	<li><a href="rockyscript.html">Rocky Script</a></li> 	<li><a href="#">Shopping</a>	   <ul>	<li><a href="#">4ROCKY.com</a></li>	<li><a href="shopping.html">Amazon.com</a></li> 	   </ul>	</li>	<li><a href="http://4rcoky.proboards82.com/">4ROCKY Forum</a></li>	<li><a href="contact.html">Contact</a></li></ul>

When you put the mouse over the News option (in Firefox), it opens up two more options: Sly the Man and Movies. But in IE, nothing happens. And there is that annoying laaarge space between menu's options. What should I do? Thank you in advance,Xtazy

[vijay]

Hi.. I've checked your code in IE7 as well as in FF.. Its working fine in both. only problems with IE7 is that it wont getting id 'nav' so I have given <ul id="nav"> @ first level..Regards,Vijay