css二级下拉菜单样式 |div css视频教程

下面大家来看一下如何创建CSS二级下拉菜单：

/*设置一级菜单样式*/
.nav li{
float:left;
position:relative;
list-style:none;
padding:10px;
background:#333;
}
/*设置二级菜单样式*/
.nav ul{
position:absolute;
display:none;
top:40px;
left:0;
width:200px;
padding:0;
margin:0;
background:#555;
}
.nav ul li{
list-style:none;
margin:0;
padding:0;
}
/*鼠标悬停一级菜单时显示二级菜单*/
.nav li:hover ul{
display:block;
}
/*设置二级菜单中的链接样式*/
.nav ul li a{
display:block;
padding:10px;
color:#fff;
text-decoration:none;
}
.nav ul li a:hover{
background:#666;
}

代码解释：

首先，大家设置了一级菜单的样式，其中position:relative属性是为了让二级菜单以该元素为基准定位。接着，大家设置了二级菜单的样式，将其position属性设置为absolute，这样可以让下拉菜单脱离文档流，不影响其他元素的布局。然后，大家利用鼠标悬停一级菜单时，将其子元素ul的display属性设置为block，实现下拉菜单的效果。最后，大家设置了二级菜单中的链接样式，为其设置了颜色、文字大小和背景色等。

通过以上CSS代码，大家便可以轻松地实现CSS二级下拉菜单样式。该样式不仅美观，而且易于实现，值得开发者学习和应用。