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.

Website: http://bit.ly/9ZFJk5

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


Home Hearing

• How You Hear
• Hearing Test
• Hearing Loss
• Online Hearing Test

Hearing Aids Tinnitus Patients About Us

• About Us
• Top Ten Reasons
• Our Staff
• Our Location
• Patient Forms

Contact Us

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!