IE7 li ul bug on dropdown menu - menu

Question

hoping one of you guys can help me please.
I have a basic list menu with two dropdowns. This all works fine on all browsers except IE6 and IE7. Please take a look at my markup.
<nav>
<ul id="topNav"
><li id="topNavFirst">About Us</li
><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a
><ul id="subList1"><li>Mike Hadfield</li
><li>Karen Sampson</li
><li>Milhana Farook</li
><li>Kim Crook</li
><li>Amanda Lynch</li
><li>Gideon Scott</li
><li>Paul Fuller</li
><li>Peter Chaplain</li
><li>Laura Hutley</li
></ul
></li
><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a
><ul id="subList2"><li>Company & Commercial</li
><li>Employment</li
><li>Civil Litigation</li
><li>Debt Recovery</li
><li>Conveyancing</li
><li>Commerical Property</li
><li>Wills & Probate</li
><li>Matrimonial & Family</li
></ul
></li
><li>News</li
><li>Careers</li
><li>Contact</li
></ul><!-- /topNav -->
</nav>​
and the css
a {text-decoration:none;}
#topNav {
float:right;
height:30px;
margin:0;
font-size:12px;
}
#topNav li {
display:inline;
float:left;
list-style:none;
color:#666;
border-left: 1px solid #666;
padding: 0 3px 0 3px;
position:relative;
}
#topNav ul a {
white-space:nowrap;
}
#topNav li a:hover {
border-bottom:2px solid #369;
}
#topNavSecond a:hover {
border-bottom:2px solid transparent !important;
}
#topNavFirst {
border-left: 1px solid transparent !important;
}
/*****OUR-PEOPLE DROPDOWN*****/
#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
position:absolute;
left:-9999px;
width:100px;
text-align:left;
padding:5px 0 5px 0px;
margin:0 0 0 -4px;
z-index:10;
-webkit-box-shadow: 1px 1px 1px #666;
-moz-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
vertical-align: bottom;
}
#topNav ul li{
display:block;
border-left:0px;
margin-bottom: 0px;
padding:0;
vertical-align: bottom;
}
#topNav ul a{
padding:0 0 0 5px;
}
#topNav li:hover ul{
left:auto;
}
#topNav li:hover a {
color:#369;
}
#topNav li:hover ul a{
text-decoration:none;
color:#666;
}
#topNav li:hover ul li a:hover{
color:#fff;;
width:100%;
border-bottom:0px solid transparent !important;
}
#topNav ul li:hover {
background:#369;
display: block;
}
#topNav ul li a {
display: block;
padding:0 0 0 4px;
}
/************/
/*****OUR-SERVICES DROPDOWN*****/
#topNavThird a:hover {
border-bottom:2px solid transparent !important;
}
#topNavThird ul{
/*background:#fff url(images/service-ul-bg.png) no-repeat;*/
width:135px !important;
/*margin-left:120px !important;*/
}​
script
jQuery(document).ready(function () {
$('#subList1').css("display", "none");
$('#topNavSecond').hover(function () {
$('#subList1').stop(true, true).fadeIn('400');
},
function(){
$('#subList1').stop(true, true).fadeOut('400');
});
$('#subList2').css("display", "none");
$('#topNavThird').hover(function () {
$('#subList2').stop(true, true).fadeIn('400');
},
function(){
$('#subList2').stop(true, true).fadeOut('400');
});
});
here it is working perfectly
http://jsfiddle.net/BcWd9/6/
here is a screen shot of how it looks in IE7.
hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg
as you can see the ul is appearing to the right of the li and not the left and it is overlaying the top list. I've tried removing white space, but no luck. Any ideas? If one of you can help it would be much appreciated.

Answer 1

Try this—instead of using a left value to hide the submenus, try using display: none; instead. Then position them using left and top on rollover. This seems to work for me in IE7 in windows and Chrome/Firefox, though I haven't been able to test it in IE6.
#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
display: none;
width:100px;
text-align:left;
padding:5px 0 5px 0px;
margin:0 0 0 -4px;
z-index:10;
-webkit-box-shadow: 1px 1px 1px #666;
-moz-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
vertical-align: bottom;
}
.
.
.
#topNav li:hover ul{
display: block;
position: absolute;
left: 3px;
top: 14px;
}
Here's an updated version on jsFiddle: http://jsfiddle.net/BcWd9/5/

Answer 2

I had the same problem. The way it worked out for me is adding an explicit width for the li element being displayed on hover
#nav li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
*zoom:1; /*IE7*/
*width:12em; /*IE7*/
}