定位下拉菜单

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