IE7 shrink wrap issue with Nested <ul> flyout menu with css

I’m creating flyout menus from an unordered list. The behavior looks consistent in all modern browsers I’ve tested (IE9, Chrome, FF, Safari) however, it off in IE7 as you can see below. For some reason, the width of each li element is shrinking to the contents rather than equivalent to the widest sibling element (as in the modern browsers).

Here’s what it should look like:

I’ve pasted my css below, what would you add or remove to the .menu.nav ul ul li {} to get IE7 in line?

/nav menu/
.menu.nav { float:left; margin:42px 0 0 19px; height:50px; width:885px; background:url(spot.gif) 0 49px repeat-x;}
.home .menu.nav {background:none;}
.menu.nav ul {position:relative; list-style:none; z-index: 50; float:left; margin:0 -999em 0 0; padding:0;}
.menu.nav ul li {position:relative; float:left; margin:0 10px 0 0;}
.menu.nav ul ul {position:absolute; visibility:hidden; list-style:none; z-index:9999; margin-left:0; box-shadow:1px 5px 10px #777;}
.menu.nav ul ul li {display:block;width:100%;}
.menu.nav ul ul ul {left:150px;}
.menu.nav ul ul li {clear:both;}
.menu.nav ul li a {display:block; padding:0 20px; line-height:50px; color:#333; text-decoration:none; font-size:1.25em; *white-space:nowrap;}
.menu.nav ul ul li a {background:url(spot.gif); color:#fff;}
.menu.nav ul ul li a:hover {background:url(spot.gif); color:#333}
.menu.nav ul ul ul {position: absolute; top: 0; }
.menu.nav ul li:hover ul, .menu.nav ul a:hover ul, .menu.nav ul :hover ul :hover ul, .menu.nav ul :hover ul :hover ul :hover ul { visibility: visible;}
.menu.nav ul :hover ul ul, .menu.nav ul :hover ul :hover ul ul { visibility: hidden; }
.menu.nav ul a:hover, .menu.nav ul li.current_page_item a, .menu.nav ul li:hover a, .menu.nav ul li.current-menu-parent a {background:url(spot.gif); color:#fff; border-radius:17px 17px 0 0;}
.menu.nav ul ul a:hover {border-radius:0 !important; background:url(menu_bg.png), url(spot.gif) !important;}
ul.sub-menu a {border-radius:0 !important;-moz-border-radius:0 !important;-webkit-border-radius:0 !important;}

Update: The menu markup structure is:


<div class="menu nav">
	<ul>
		<li><a href="#">Home</a><li>
		<li><a href="#">Menu</a><li>
		<li><a href="#">About Us</a>
			<ul class="sub-menu"> 
				<li><a href="#">Contact Us</a>
					<ul class="sub-menu"> 
						<li><a href="#">Directions</a></li>
					</ul>
				</li>
				<li><a href="#">Privacy Policy</a></li>
			</ul>
		</li>
	</ul>
</div>

Hi,

Ie7 is very difficult to manage in a fluid drop down. The main sticking points are that the nested anchor and the nested list must not be in haslayout mode or they won’t go full width. That means you can’t float them or give them dimensions.

Of course this then makes styling them very difficult.

This is the sort of format you will need to use.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.menu.nav {
    float:left;
    margin:42px 0 0 19px;
    height:50px;
    width:885px;
    background:red url(spot.gif) 0 49px repeat-x;
}
.home .menu.nav {
    background:none;
}
.menu.nav ul {
    position:relative;
    list-style:none;
    z-index: 50;
    float:left;
    margin:0 -999em 0 0;
    padding:0;
}
.menu.nav ul li {
    position:relative;
    float:left;
    margin:0 10px 0 0;
}
.menu.nav ul ul {
    position:absolute;
    visibility:hidden;
    list-style:none;
    z-index:9999;
    margin-left:0;
    box-shadow:1px 5px 10px #777;
    background:url(fake.gif) no-repeat -1px -1px;/* ie7 hack*/
}
.menu.nav ul ul li {
    display:block;
    float:none;
    margin:0;
}
.menu.nav ul ul ul {
    left:150px;
}
.menu.nav ul ul li {
    clear:both;
}
.menu.nav ul li a {
    display:block;
    padding:0 20px;
    line-height:50px;
    color:#333;
    text-decoration:none;
    font-size:1.25em;
    white-space:nowrap;
}
.menu.nav ul ul li a {
    background:url(spot.gif);
    color:#fff;
    padding:12px 20px;
    line-height:normal;
    position:relative;
}
.menu.nav ul ul li a:hover {
    background:blue url(spot.gif);
    color:#333
}
.menu.nav ul ul ul {
    position: absolute;
    top: 0;
}
.menu.nav ul li:hover ul, .menu.nav ul a:hover ul, .menu.nav ul :hover ul :hover ul, .menu.nav ul :hover ul :hover ul :hover ul {
    visibility: visible;
}
.menu.nav ul :hover ul ul, .menu.nav ul :hover ul :hover ul ul {
    visibility: hidden;
}
.menu.nav ul a:hover, .menu.nav ul li.current_page_item a, .menu.nav ul li:hover a, .menu.nav ul li.current-menu-parent a {
    background:green url(spot.gif);
    color:#fff;
    border-radius:17px 17px 0 0;
}
.menu.nav ul ul a:hover {
    border-radius:0 !important;
    background:yellow url(menu_bg.png), url(spot.gif) !important;
}
ul.sub-menu a {
    border-radius:0 !important;
    -moz-border-radius:0 !important;
    -webkit-border-radius:0 !important;
}
</style>
</head>
<body>
<div class="menu nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">About Us</a>
            <ul class="sub-menu">
                <li><a href="#">Contact Us</a>
                    <ul class="sub-menu">
                        <li><a href="#">Directions</a></li>
                    </ul>
                </li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">test</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>


I just used some background colours as I didn’t really know what all those images were of course.

Thanks Paul. Always appreciate your insights on the “margins” of css usage.