Ошибка CSS-индекса CSS в IE 7

Question

У меня возникают проблемы с z-index в IE 7. Проблема в том, что пункты меню находятся в 2 строках. Если какой-либо элемент первой строки имеет подменю, IE7 не позволит вам его навести. Проблема вызвана только IE7.

Вот мой код:

<div id="wrapper"> 

    <div id="main-nav"> 
     <ul class="main-menu" id="menu-header-menu"> 
      <li class="menu-item"><a href="#">item 1</a> 
       <ul class="sub-menu"> 
        <li class="menu-item"><a href="#"> sub item</a> 
         <ul class="sub-menu"> 
          <li class="menu-item"><a href="#">sub sub item</a></li> 
          <li class="menu-item"><a href="#">sub sub item</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 

      <li class="menu-item"><a href="#">item 2</a></li> 
      <li class="menu-item"><a href="#">item 3</a></li> 
      <li class="menu-item"><a href="#"> test item</a> 
        <ul class="sub-menu"> 
         <li class="menu-item"><a href="#">sub sub item</a></li> 
         <li class="menu-item"><a href="#">sub sub item</a></li> 
        </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS:

#wrapper { 
    width:250px; 
    margin:0 auto; 

} 
#main-nav { 
    background-color:orange; 
    padding: 0 10px;  
    clear: both; 
    display: block; 
    float: left; 
    width: 100%;  
} 

#main-nav ul { 
    list-style: none; 
    margin: 0 0 0 -0.8125em; 
    padding-left: 0; 
} 
#main-nav li { 
    float: left; 
    position: relative; 
} 

#main-nav a { 
    color:#737373; 
    display: block; 
    line-height: 2.333em; 
    padding: 0 1.2125em; 
    text-decoration: none; 
} 
#main-nav ul ul { 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 2.333em; 
    left: 0; 
    width: 188px; 
    z-index: 999; 
} 
#main-nav ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#main-nav ul ul a { 
    background: yellow; 

    height: auto; 
    line-height: 1.4em; 
    padding: 10px 10px; 
    width: 168px; 
} 

#main-nav li:hover > a, 
#main-nav a:focus { 
    color: #373737; 
} 

#main-nav ul li:hover > ul { 
    display: block; 
} 

Здесь вы можете увидеть проблему. Когда вы наводите курсор на элемент 1, он не позволяет мне навешивать его элемент, который имеет желтый фон.

Answer 1

Легко исправить. Добавьте это к нижней части кода CSS:

#main-nav ul li:hover {z-index:9999;} 

Проблема заключается в том, что ваш элемент необходим более высокий Z-индекс при зависании, а не раньше.

Настоящая живая ссылка на демонстрацию, которую я загрузил. Работает как на IE7 и FF/CHR/SAF:

http://sotkra.com/stackoverflow/ie7zindex/index.html

я, тем не менее предлагаю вам упростить код, это слишком неуклюжим. Есть крошечная ошибка, когда вы наведете свое меню 3-го уровня, выйдите и снова заново введите желтый фон. Должно быть установлено с надлежащей очистки вашего HTML/CSS

Приветствий
G