IE Submenu margin fix?

HTML & CSS
1

I have a submenu using the following CSS:


#menu li ul {
	width: 0; 
	height: 0; 
	margin: 0; 
	padding: 0;	
	position:absolute; 
	left: -9999px; 
	top: -9999px; 
}

#menu li:hover ul {
	width: 173px;
	height: auto;
	left: 0; 
	top: 20px; 
	background: url(../images/site/sub_bg.png);
	border: 1px solid #FFF; 
	white-space: nowrap;
	overflow: hidden;	
}

This works fine in all browsers (FF, Chrome, Opera, Safari), but IE. Somehow it looks like there is some margin between the <li> and the <ul>, because when I want to roll over the submenu in IE it disappears. When I use top: 18px it works in IE but in all other browsers the submenu is moving under the <li>. Is there a special fix for IE to solve this?

2

I’d need to see the whole page but IE needs the submenu to remain in contact with the top menu or the hover loses focus as you traverse from one to the other. Make sure the parent list is at least 20px high or you will be placing the submenu too far away.

Have you floated the top level as that usually kills whitespace bugs?

3

Hi Paul, All that you mentioned is applied. Height, float etc. Sorry that i didn’t show the parent <li> and anchor. Here they are:


#menu li {
	float: left;
	height: 20px;
	line-height: 20px;
	position: relative;
}

#header #menu li a {
	height: 20px;
	line-height: 20px;	
	padding: 0 14px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
}
4

There must be something else causing the issue because the above is working fine for me in IE.


<!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 type="text/css">
body{background:#ccc;}
ul{margin:0;padding:0;list-style:none}

#menu li {
    float: left;
    height: 20px;
    line-height: 20px;
    position: relative;
}
#menu li a {
    height: 20px;
    line-height: 20px;
    padding: 0 14px;
    display: block;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
}
#menu li ul {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    position:absolute;
    left: -9999px;
    top: -9999px;
}
#menu li:hover ul {
    width: 173px;
    height: auto;
    left: 0;
    top: 20px;
    background: url(../images/site/sub_bg.png);
    border: 1px solid #FFF;
    white-space: nowrap;
    overflow: hidden;
}
</style>
</head>
<body>
<ul id="menu">
    <li><a href="#">Test 1</a>
        <ul>
            <li><a href="#">Submneu</a></li>
            <li><a href="#">Submneu</a></li>
            <li><a href="#">Submneu</a></li>
            <li><a href="#">Submneu</a></li>
        </ul>
    </li>
    <li><a href="#">Test 2</a>
        <ul>
            <li><a href="#">Submneu</a></li>
            <li><a href="#">Submneu</a></li>
            <li><a href="#">Submneu</a></li>
            <li><a href="#">Submneu</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

I couldn’t check IE6 as you didn’t add any js.

Can you run up a working demo so we can see the problem live ?