IE7 li ul bug on dropdown menu
- by Berns
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"><a href="../about/about.php" id="aboutNav">About Us</a></li
><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a
><ul id="subList1"><li><a href="../people/mike-hadfield.php">Mike Hadfield</a></li
><li><a href="../people/karen-sampson.php">Karen Sampson</a></li
><li><a href="../people/milhana-farook.php">Milhana Farook</a></li
><li><a href="../people/kim-crook.php">Kim Crook</a></li
><li><a href="../people/amanda-lynch.php">Amanda Lynch</a></li
><li><a href="../people/gideon-scott.php">Gideon Scott</a></li
><li><a href="../people/paul-fuller.php">Paul Fuller</a></li
><li><a href="../people/peter-chaplain.php">Peter Chaplain</a></li
><li><a href="../people/laura-hutley.php">Laura Hutley</a></li
></ul
></li
><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a
><ul id="subList2"><li><a href="../services/company-and-commercial.php">Company & Commercial</a></li
><li><a href="../services/employment.php">Employment</a></li
><li><a href="../services/civil-litigation.php">Civil Litigation</a></li
><li><a href="../services/debt-recovery.php">Debt Recovery</a></li
><li><a href="../services/conveyancing.php">Conveyancing</a></li
><li><a href="../services/commercial-property.php">Commerical Property</a></li
><li><a href="../services/wills-and-probate.php">Wills & Probate</a></li
><li><a href="../services/family.php">Matrimonial & Family</a></li
></ul
></li
><li><a href="../news/news.php" id="newsNav">News</a></li
><li><a href="../careers/careers.php" id="careersNav">Careers</a></li
><li><a href="../contact/contact.php" id="contactNav">Contact</a></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;*/
}?
here it is working perfectly
http://jsfiddle.net/BcWd9/
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.
