Question

我一直在尝试让这个菜单系统工作一段时间，并且在看了许多不同的解决方案之后，似乎没有什么对我有用。

当悬停在顶级菜单上时，子菜单出现，但如果我尝试将鼠标向下移动到子菜单，则只要我的鼠标离开顶层，它就会再次消失。

此外，当它确实显示它显示在其他页面内容的后面时，我认为他可能是因为我的页面标题包含单独的include（）文件中的导航。

对此的任何帮助将不胜感激，我的代码如下：

HTML：

<div id="nav">
    <ul>
    <li><a href="#">Menu</a>
        <ul>
            <li><a href="#">category</a></li>
            <li><a href="#">category</a></li>
            <li><a href="#">category</a></li>
        </ul></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    <ul>
    <li>Hello,</li>
    <li><a href="#">Sign in</a></li>
    <li><a href="#">country</a></li>
    <li><a href="#">cart</a></li>
    </ul>
</div>

CSS：

#nav{
    height:50px;
}
#nav > ul{
    list-style:none;
    padding:0px;
    margin:0px;
    vertical-align:top;
}
#nav > ul:nth-child(1){
    float:left;
    height:50px;
    line-height:50px;
    font-weight:bold;
}
#nav > ul:nth-child(2){
    float:right;
    height:50px;
    line-height:50px;
}
#nav > ul > li {
    display: inline-block;
    vertical-align:top;
}
#nav > ul:nth-child(1) > li{
    width:100px;
}
#nav > ul:nth-child(2) > li{
    padding-left:10px;
}
#nav > ul > li > ul{
    display:none;
}
#nav > ul > li:hover > ul{
    display:block;
    z-index:5;
    padding:0px;
    margin:0px;
    width:200px;
}
#nav > ul > li:hover > ul > li{
    background: #fff;
    border:1px solid #bbb;
    display:block;
    padding:10px;
    line-height:16px;
    font-weight:normal;
}
#nav > ul > li:hover > ul > li > a{
    color:#333;
}

Answer 1

即将完成，您需要设置z-index和position: relative。这是因为z-index需要设置一个位置（更多信息here和here）。

＆＃13;

#nav{
    height:50px;
}
#nav > ul{
    list-style:none;
    padding:0px;
    margin:0px;
    vertical-align:top;
}
#nav > ul:nth-child(1){
    float:left;
    height:50px;
    line-height:50px;
    font-weight:bold;
}
#nav > ul:nth-child(2){
    float:right;
    height:50px;
    line-height:50px;
}
#nav > ul > li {
    display: inline-block;
    vertical-align:top;
}
#nav > ul:nth-child(1) > li{
    width:100px;
}
#nav > ul:nth-child(2) > li{
    padding-left:10px;
}
#nav > ul > li > ul{
    display:none;
}
#nav > ul > li:hover > ul{
    display:block;
    z-index:5;
    padding:0px;
    margin:0px;
    width:200px;
}
#nav > ul > li:hover > ul > li{
    background: #fff;
    border:1px solid #bbb;
    display:block;
    padding:10px;
    line-height:16px;
    font-weight:normal;
background:red;
z-index:10;
position:relative;
}
#nav > ul > li:hover > ul > li > a{
    color:#333;
}

＆＃13;

<div id="nav">
    <ul>
    <li><a href="#">Menu</a>
        <ul>
            <li><a href="#">category</a></li>
            <li><a href="#">category</a></li>
            <li><a href="#">category</a></li>
        </ul></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    <ul>
    <li>Hello,</li>
    <li><a href="#">Sign in</a></li>
    <li><a href="#">country</a></li>
    <li><a href="#">cart</a></li>
    </ul>
</div>
<div>
Some content
</div>

＆＃13;

请注意，我已设置背景颜色以确定其有效。

自定义导航和在悬停时显示子菜单的问题

1 个答案: