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

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)。

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

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

请注意，我已经设置了背景颜色以查看是否有效。