定位下拉菜单

Question

我尝试将下拉项目放在菜单中，但它没有按预期工作。例如，我希望下拉项目位于主要项目下方，请参见下图

这里是适当的代码

<nav>
    <ul id="navlist">
        <li id="active"><a href="index.html">Home</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="#">Recipes</a>
            <ul>
              <li><a href="meatballs.html">Meatballs</a></li>
              <li><a href="pancakes.html">Pancakes</a></li>
            </ul>
        </li>
         <li><a href="#">Contact</a>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact us</a></li>

            </ul>
        </li>

    </ul>
</nav>

这就是css，它实际上有点混乱......

nav ul {
position:relative;
padding-left: 0;
margin:1px 0 30px 0;
background-color: #1d1d1d;
float: left;
width: 100%;

font-size:24px;
}
nav ul li { 
position:relative;
display: inline; 
}    
nav ul li a {
position:relative;
padding: 20px 20px;
background-color: #1d1d1d;
color: #fff;
text-decoration: none;
float: left;
}
nav ul li a:hover {
background-color: #619f15;
color: #fff;
}
nav ul #active a {
background-color: #619f15;
color: #fff;
}

nav ul li ul {
position: absolute;
top:66px;
width: 50%;
font-size:12px;
display:none;
}

Answer 1

要让你的下拉项目表现得正常，你需要像往常一样将它们放在绝对位置，但是从顶部定位它们要容易得多：

top: 100%;
left: 0;

这样，下拉菜单不再关心菜单的高度，而是根据主菜单调整其位置。

至于'切换'，您可以使用：

nav ul li:hover >  ul {
    display: block;
}

因此，在您的导航栏中，当一个人悬停li时，请抓住下一个ul并使其可见。

没有其他样式的完整示例：

nav ul {
    position: relative;
}
nav ul li ul {
    display: none;
    position: absolute;
    top:100%;
    left: 0;
}
nav ul li:hover >  ul {
    display: block;
}

And heres a Fiddle