Подменю с z-index не отображается

У меня есть подменю, которое показывает, что я не могу, я много думал, и я не могу найти проблему. У меня проблемы с свойством z-index, подменю не показывало меня по остальной части содержимого. Приветствую вас.Подменю с z-index не отображается

http://jsfiddle.net/9nXvT/

HTML

<html> 
<body> 
     <div class="container"> 
      <nav> 
       <ul class="site-nav"> 
        <li> 
         <a href="#">AUCTIONS</a> 
         <ul> 
          <li><a href="#">Auction 1</a></li> 
          <li><a href="#">Auction 2</a></li> 
          <li><a href="#">Auction 3</a></li> 
          <li><a href="#">Auction 4</a></li> 
         </ul> 
        </li> 
        <li><a href="#">USERS</a></li> 
        <li><a href="#">FAQ's</a></li> 
        <li><a href="#">CONTACT US</a></li> 
        <li><a href="#">SITE MAP</a></li> 
       </ul> 
      </nav> 
     </div> 

     <div class="content"></div> 
    </body> 
</html>

CSS

.site-nav { 
    border-bottom: 1px solid blue; 
    list-style: none; 
    *zoom: 1; 
    position:relative; 
    z-index: 9999; 
} 

.site-nav:before, 
.site-nav:after { 
    content: " "; 
    display: table; 
} 

.site-nav:after { 
    clear: both; 
} 

.site-nav ul { 
    list-style: none; 
    width: 9em; 
} 

.site-nav a { 
    color: green; 
    font-family: 'GothamBook'; 
    font-size: 0.75em; 
} 

.site-nav li { 
    position: relative; 
} 

.site-nav > li { 
    float: left; 
} 

.site-nav > li > a { 
    background: white; 
    display: block; 
    padding: 12px 45px; 
    text-decoration: none; 
} 

.site-nav > li > a:hover { 
    background: blue; 
    color:red; 
    text-decoration: none; 
} 

.site-nav > li > a.last{ 
    margin-right: 0px; 
} 

a.activo{ 
    background: blue; 
    color: red; 
    text-decoration: none; 
} 

.site-nav li ul { 
    position: absolute; 
    display: none; 
    top: 36px; 
    width: auto; 
    z-index: 9999; 
} 

.site-nav > li.hover > ul { 
    display: block; 
} 

.site-nav li li.hover ul { 
    left: 100%; 
    top: 0; 
    display:block; 
    z-index:9999; 
} 

.site-nav li li a { 
    background: white; 
    font-family: 'GothamBook'; 
    font-size: 0.8em; 
    display: block; 
    padding: 10px 0px 10px 40px; 
    position: relative; 
    width: 140px; 
    z-index:100; 
    text-align: left; 
    margin: 0px; 
} 

.site-nav li li a:hover{ 
    background: blue; 
    color: purple; 
} 

.content{ 
    height: 300px; 
    background: gray; 
}

источник

2013-11-11 Mario del Valle

Почему вы li.hover и не ли: парить? – Laxmana

Изменение li.hover к li:hover и он должен работать.

http://jsfiddle.net/9nXvT/4/

источник

2013-11-11 12:28:32 Laxmana

попробовать это ... заменить .hover на: парить

.site-nav > li:hover > ul { 
    display: block; 
} 

.site-nav li li:hover ul { 
    left: 100%; 
    top: 0; 
    display:block; 
    z-index:9999; 
}

http://jsfiddle.net/9nXvT/

источник

2013-11-11 12:28:51 radha

Попробуйте

скрипку DEM0 http://jsfiddle.net/9nXvT/5/

CSS

.site-nav > li:hover > ul { 
    display: block; 
} 

.site-nav li li:hover ul { 
    left: 100%; 
    top: 0; 
    display:block; 
    z-index:9999; 
}

источник

2013-11-11 12:29:12

Просто замените эти two..It будет работать ..

.site-nav > li:hover > ul { 
    display: block; 
} 

.site-nav li li:hover ul { 
    left: 100%; 
    top: 0; 
    display:block; 
    z-index:9999; 
}

источник

2013-11-11 12:29:30 Sasidharan

ответ

Смежные вопросы