带有 z-index 的子菜单不显示答案

【问题标题】：Submenu with z-index doesn't show带有 z-index 的子菜单不显示
【发布时间】：2013-11-11 20:59:45
【问题描述】：

我有一个子菜单显示我不能，我已经考虑了很多，但我找不到问题。我的 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;
}

【问题讨论】：

为什么你有 li.hover 而不是 li:hover？

标签： html css z-index submenu

【解决方案1】：

将li.hover 更改为li:hover，它应该可以工作。

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

只需更换这两个..它会工作..

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

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

【讨论】：