How to fix this IE7-dropdown menu problem? - css

Question

This is the CSS for the dropdown menu I create, the problem is that the menu disappears as soon as I hover the children items.
It gets fixed If I set Height:30px and line-height: 30px but I do not want to adjust height. I want it to auto adjust. I can't get it to work in IE7. This is my CSS
#menu {
display: block;
width: 1000px;
height: 30px;
background: url(../images/modern/menu.png) no-repeat;
margin: 10px 0 0 0;
position: relative;
z-index: 10;
}
#menu ul {
float: left;
margin: 0 0 0 5px;
display: inline;
width: 795px;
}
#menu ul li {
position: relative;
float: left;
display: block;
position: relative;
}
#menu ul li a {
float: left;
display: block;
color: #fff;
font-weight: bold;
padding: 9px 10px 9px 10px;
background: url(../images/modern/menu_l.png) no-repeat right;
}
/* sub menu style */
#menu ul ul {
padding:0;margin:0;border:none;
float: none;
display: none;
position: absolute;
z-index: 10;
width: 190px;
top: 29px;
left: 0;
}
#menu ul ul ul {
top: 0;
left: 190px;
}
#menu ul ul li {
float: none;
display: block;
position: relative;
}
#menu ul ul li a {
padding:0;margin:0;border:none;
float: none;
display: block;
font-weight: bold;
position: static;
background: none;
color: #fff;
padding: 6px 10px 6px 10px;
background: #333;
border-bottom: 1px solid #444;
}
This fixes it but I really do not want to set height for child item:
#menu ul ul li a {
padding:0;margin:0;border:none;
float: none;
display: block;
font-weight: bold;
position: static;
background: none;
color: #fff;
padding: 6px 10px 6px 10px;
background: #333;
border-bottom: 1px solid #444;
height: 30px;
line-height: 30px;
}

Answer 1

Try zoom:1; to the thing you applied height:30px; to.