pamDoreacceta
New Member
I've got a CSS drop down menu on my website, works fine in other browsers but I'm having problems with Internet Explorer. The menu displays completely differently to how it does in Firefox for example.Hoping one of you guys can help.Here is the menu HTML:Added jsFiddle: http://jsfiddle.net/YvprG/\[code\]<div id="menu-container"> <div id="menu"> <ul> <li class="selected"><span style="text-align: left"><a href="http://stackoverflow.com/questions/15590578/index.html">Home</a></li></span> <li><span style="text-align: left"><a href="http://stackoverflow.com/questions/15590578/#">Link Main</a></span> <ul> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> </ul> </li> <li><span style="text-align: center"><a href="http://stackoverflow.com/questions/15590578/#">Link Main</a></span> <ul> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> </ul> </li> <li><span style="text-align: center"><a href="http://stackoverflow.com/questions/15590578/#">Link Main</a></span></li> <li><span style="text-align: center"><a href="http://stackoverflow.com/questions/15590578/#">Link Main</a></span> <ul> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> <li><a href="http://stackoverflow.com/questions/15590578/#">Link Here</a></li> </ul> </li> <li><span style="text-align: right"><a href="http://stackoverflow.com/questions/15590578/#">Link Main</a></span></li> </ul> </div> </div> <!--Menu-->\[/code\]CSS Code:\[code\]/** MENU STYLES **/#menu-container{ width:100%; background:url(img/menu-background.png) repeat-x scroll 0 0; background-position:center; position:relative; border-bottom:3px solid #001853;}#menu{ width:960px; height:39px; padding:10px 0 0; margin:0 auto; display:block; position:relative; background:url(img/menu_background.png) no-repeat scroll 0 0 transparent; z-index:996; zoom:1;}#menu ul{ height:28px; position:relative; float:left; z-index:235; zoom:1;}#menu ul li { height:15px; padding:0px 8px 14px 5px; margin:0; font:15px/15px Open Sans, Arial, sans-serif; color:#fff; display:inline; float:left; position:relative; z-index:236; zoom:1;}#menu ul li a { width:147px; text-decoration:none; color:#fff; font:15px/15px Open Sans, Arial, sans-serif; letter-spacing:0.3px; display:block; float:left; padding:8px 0; zoom:1;}#menu ul li:hover ul li a,#menu ul li ul li:hover ul li a{ color:#fff;}#menu ul li.selected a,#menu ul li:hover a,#menu ul li ul li ul li:hover a { color:#1e1e1e;}#menu ul li ul{ position: absolute; width: 210px; height:auto; left: -9999px; background:rgb(0, 24, 83); z-index:999; border: 1px solid #fff; zoom:1;}#menu ul li ul { display:none; left:-15px; top:43px;}#menu ul li ul li ul { display:none; left:188px; top:-15px; width: 210px;}#menu ul li ul li{ clear:left; width: 210px; height:auto; padding:0; background:transparent; display:block;}#menu ul li ul li a { font-size:13px; padding:5px 5px; display:block; width:200px; background:none; color:#fff;} #menu ul li ul li a span { font-size:15px; float:right;}#menu ul li ul li:hover a { background:rgb(79, 148, 208); color:#fff;}/* MENU STYLES */\[/code\]Really appreciate any help, thanks guys.