Dropdown menu keeps disappearing & menu items covered by pic in IE7

Question

This problem only affects IE7. The hover effect works but when I attempt to hover over the sub-menu items, the menu suddenly disappears! Only, it's covered by the images in the header div. I've tried z-index and removing margin among other things but nothing works.

CSS

#menu-container{
    background: url(../images/menu-bg.png) repeat-x;
    height: 75px;
}
    
#menu{
    width: 960px;
    margin: 0px auto;
    height: 75px;
    border-left: 1px dashed #2a3f37;
}
        
#menu ul{
    
}
            
#menu ul li{
    float: left;
    line-height: 75px;
}

#menu a, #menu h2{
    display: block;
}
 
#menu a{
    text-decoration: none;
}
 
#menu a:hover{
    color: #A00;
    background: #fff;
}
 
#menu li{
    position: relative;
    z-index:2px !important;
}

#menu ul li a {        /*stle for IE7*/
    height: 1%;
} 
 
#menu ul ul{
    position: absolute;
    top: 75px;
    left:0px;
    background: #000;
    z-index:2px !important;
}

#menu ul li ul li a{
    width: 175px;
    height: 35px;
    line-height: 35px;
}
 
#menu ul ul ul{
    position: absolute;
    top: 0;
    left: 100%;
}
 
div#menu ul li ul li{
    margin:0px;
} 
 
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
    display: none;
}
 
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
    display: block;
    z-index: 2;
}

HTML

<div id="menu-container"> 
    <div id="menu"> 
        <ul class="menu"> 
            <li class=active><a href="index.php">Home</a></li> 
            <li ><a href="#">Hearing</a> 
                <ul> 
                    <li><a href="how_you_hear.php">How You Hear</a></li> 
                    <li><a href="hearing_test.php">Hearing Test</a></li> 
                    <li><a href="hearing_loss.php">Hearing Loss</a></li> 
                    <li><a href="hearing_testing.php">Online Hearing Test</a></li> 
                </ul> 
            </li> 
            <li ><a href="digital_hearing.php">Hearing Aids</a></li> 
            <li ><a href="tinnitus.php">Tinnitus</a></li> 
            <li ><a href="testimonials.php">Patients</a></li> 
            <li ><a href="about.php">About Us</a> 
                <ul> 
                    <li><a href="about.php">About Us</a></li> 
                    <li><a href="top_ten_reasons.php">Top Ten Reasons</a></li> 
                    <li><a href="professionals.php">Our Staff</a></li> 
                    <li><a href="location.php">Our Location</a></li> 
                    <li><a href="forms.php">Patient Forms</a></li> 
                </ul> 
            </li> 
            <li ><a href="contact.php">Contact&nbsp;Us</a></li> 
        </ul><!--/menu--> 
    </div><!--/menu--> 
</div>
<!--/menu-container-->

Answer 1

Ohhh such a rule there div#menu ul li:hover ul ul (and many others) are not treated by IE6 or IE7.

IE browsers until IE8 only manage :hover rules for link elements.

Check this tutorial where it's explained in detail the problem and the solution.

Good Luck!