定位下拉菜单

时间:2014-09-11 03:25:12

标签: html css css3

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

这里是适当的代码

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

1 个答案:

答案 0 :(得分: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