Question

我有一个子菜单，显示我不能，我已经考虑了很多，我找不到问题。我有z-index属性的问题，子菜单没有显示我的其余内容。关心谢谢。

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;
}

Answer 1

将li.hover更改为li:hover，它应该有效。

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

Answer 2

尝试这个...将.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/

Answer 3

试试这个

小提琴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;
}

Answer 4

只需更换这两个..它会起作用..

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

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

带z-index的子菜单不显示

4 个答案: