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

Question

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

0

У меня есть подменю, которое показывает, что я не могу, я много думал, и я не могу найти проблему. У меня проблемы с свойством 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;
}

Mario del Valle 11 нояб. 2013, в 13:27

Источник

0

Почему у вас есть li.hover, а не li: hover?
Laxmana 11 нояб. 2013, в 12:26

Теги:

html

css

submenu

z-index

4 ответа

Ещё вопросы

Почему у вас есть li.hover, а не li: hover?

Laxmana · Answer 1 · 2013-11-11T10-03-00.000Z

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

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

radha · Answer 2 · 2013-11-11T11-15-00.000Z

попробуйте этот... замените.hover на: 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/

Sasidharan · Answer 3 · 2013-11-11T10-20-00.000Z

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

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

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

Sridhar R · Answer 4 · 2013-11-11T09-36-00.000Z

Попробуй это

Скрипт 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;
}