css垂直导航二级菜单 |css 选项卡 样式

.nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
.nav li {
position: relative;
}
.nav >li {
display: block;
}
.nav >li >a {
display: block;
color: #fff;
padding: 10px 15px;
text-decoration: none;
}
.nav li ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
.nav li:hover ul {
display: block;
}
.nav ul li {
display: block;
}
.nav ul li a {
display: block;
width: 200px;
background-color: #444;
color: #fff;
padding: 10px 15px;
text-decoration: none;
}
.nav ul li a:hover {
background-color: #666;
}

在以上代码中，首先定义了导航的样式，将ul、li的默认样式去掉，在背景颜色为黑色的区域中显示导航，导航链接的文本颜色为白色。

在li的:hover状态下显示子菜单，使用绝对定位将子菜单定位在父菜单下方，设置display:none来隐藏子菜单。

其中.nav >li >a表示只选择父元素为nav的直接子元素li中的链接a；而.nav ul li则表示选择子元素为ul的所有li元素。

以上就是CSS垂直导航二级菜单的制作方法，可以根据需要进行相应的调整。