Раскрывающееся меню продолжает исчезать и пункты меню покрыты рис в IE7 - PullRequest
0 голосов
/ 29 августа 2010

Эта проблема касается только IE7.Эффект парения работает, но когда я пытаюсь навести курсор на пункты подменю, меню внезапно исчезает!Только это покрыто изображениями в заголовке div.Я пробовал z-index и удалял поля между прочим, но ничего не работает.

Сайт : 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

<br> Home</li> Hearing <ul> <li>How You Hear</li> <li>Hearing Test</li> <li>Hearing Loss</li> <li>Online Hearing Test</li> </ul> </li> Hearing Aids</li> Tinnitus</li> Patients</li> About Us <ul> <li>About Us</li> <li>Top Ten Reasons</li> <li>Our Staff</li> <li>Our Location</li> <li>Patient Forms</li> </ul> </li> Contact Us</li>

1 Ответ

1 голос
/ 17 мая 2011

Ооо, там есть такое правило div#menu ul li:hover ul ul (и многие другие) не обрабатываются IE6 или IE7.

Браузеры IE до IE8 управляют только :hover правилами для элементов ссылок.

Проверьте этот учебник , где подробно объясняется проблема и решение.

Удачи!

...