Can't seem to get a menu 's sublinks to display correctly in ie7?

Hi,

I have a menu with images for top level links and text for sub links. It’s fine in all browsers except for ie7 (well and ie 6 but i’m not sure if i’m too fussed about this).

My code is as follows:

<div class="menu">
    <ul>
        <li><a href="#" title="Home" class="nav01 "><span>Home</span></a></li>
<li><a href="#" title="Portfolio" class="nav02"><span>Portfolio</span></a>
    <!--[if lte IE 6]>
    <a href="#" title="Portfolio">Portfolio<table><tr><td>
    <![endif]-->
    <ul>
  <li class="active"><a href="#" title="Food" class="Food "><span>Sub1</span></a></li>

  <li class="last"><a href="#" title="Still Life" class="Still Life "><span>Sub2</span></a></li>

  </ul>
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>
<li><a href="#" title="Blog" class="nav03 "><span>Blog</span></a></li>
<li><a href="#" title="Contact" class="nav04 "><span>Contact</span></a></li>
<li><a href="#" title="Testimonials" class="nav05 "><span>Testimonials</span></a></li>
<li class="last"><a href="#" title="Links" class="nav06 "><span>Links</span></a></li>

    </ul>

</div>   

CSS:


.menu {
width:670px; 
margin:5px 0 40px 0; 
position:relative;
z-index:100;
text-transform: uppercase;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:left; 
text-decoration:none;  
height:20px;  
line-height:20px;
}
.menu ul li a.nav01 {background:url(images/nav_01.gif) no-repeat 0px 0px; width: 110px;}
.menu ul li a.nav02 {background:url(images/nav_02.gif) no-repeat 0px 0px; width: 133px;}
.menu ul li a.nav03 {background:url(images/nav_03.gif) no-repeat 0px 0px; width: 101px;}
.menu ul li a.nav04 {background:url(images/nav_04.gif) no-repeat 0px 0px; width: 120px;}
.menu ul li a.nav05 {background:url(images/nav_05.gif) no-repeat 0px 0px; width: 165px;}
.menu ul li a.nav06 {background:url(images/nav_06.gif) no-repeat 0px 0px; width: 41px;}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
.menu ul li a.nav01 span,.menu ul li a.nav02 span, .menu ul li a.nav03 span, .menu ul li a.nav04 span, .menu ul li a.nav05 span, .menu ul li a.nav06 span {margin-left: -9999px;}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a, .menu ul li.active a{
background-position: 0px -20px;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:20px; 
left:1px; 
width:70px;
background:#000; 
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#000; 
color:#fff;
font-size: 90%;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
color:#feba12;
}

The sub links in ie7 are not displaying vertically below the top level link and instead are just spanning the width of the sub links ul width.

Anyone have any ideas of what i need to change to get it to work?

Thanks

G

Hi, I don’t know what you mean. Every browser is displaying that way lol :). Not just IE7. That’s because you floated the top list but didn’t unfloat the dropdowns <li>'s


.menu li li{float:none;}

hi ryan,

of course…thanks for that, although it was displaying ok for me in other browsers.
Cheers

G

Glad it worked :slight_smile: