CSS实现下拉菜单

来源：互联网发布：天谕怎么保存捏脸数据编辑：程序博客网时间：2024/04/28 05:33

HTML部分：

<body>
<ul id="nav">
<li><a href="#">starters</a>
    <ul>
<li><a href="#">fish</a></li>
<li><a href="#">book</a></li>
<li><a href="#">food</a></li>
</ul>
</li>
<li><a href="#">main course</a>
    <ul>
<li><a href="#">math</a></li>
<li><a href="#">english</a></li>
<li><a href="#">chinese</a></li>
</ul>
</li><li><a href="#">car</a>
    <ul>
<li><a href="#">benz</a></li>
<li><a href="#">bmw</a></li>
<li><a href="#">changcheng</a></li>
</ul>
</li>
</ul>
</body>

定义的CSS：

首先为顶级菜单添加样式规则：去除它的默认样式，同时将列表项的float属性设置成left，以使它们以水平方式排列，然后列表项的position设置志relative，以便后续能够定位到其包含的弹出菜单：

#nav,#nva ul{
padding:0;
margin:0;
list-style:none;
}
#nav li{
float:left;
position:relative; //没有这个，子菜单将以水平方向显示
width:10em;
border:1px solid #b0c4de;
background-color:#e7edf5;
color:#2d486c;
font-size:80%;
margin-right:1em;
}

强制使菜单中的链接以块形元素的形式显示，从而让它们能填充菜单项所处的方形区域（通过把链接的宽度设置志100%，也能确保可点击的区域扩展到整个容器范围内）：

#nav a:link,#nav a:visited{
display:block;
text-decoration:none;
padding-left:1em;
color:#2d486c;
}

接下来，将为生成弹出菜单的内嵌列表添加样式规则：使它们在默认情况下不会显示，而且在显示时使用绝对定位模式，以确保它们不会影响文档其它内容的页面而已：

#nav ul{
display:none;
position:absolute;
padding:0;
}

为了避免弹出菜单也以水平方式排列，所以需要将float属性设置成none：

#nav ul li{

float:none;

...

}

最终，通过使用：hover伪类使鼠标指针移到菜单项时显示出弹出菜单：

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

完整的CSS：