导语 二级菜单主要通过无序列表ul的嵌套实现，注意设置样式的时候，因为被嵌套的元素是嵌套元素的子元素，如果不加类名，样式就会继承，整个就乱掉了。建议给第一层的ul和li一个类名，这样后面的子元素就不会继承外层的父元素的样式了。
HTML
CSS
*{
margin: 0;
padding: 0;
font-family: "幼圆";
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.out{
padding-left:50px;
line-height: 65px;
height:65px;
background-color:black;
}
.out .li1,.out .li2{
width:140px;
text-align: center;
float:left;
}
.out .li1 a,.out .li2 a{
color:antiquewhite;
}
.out .in{
width:140px;
background-color:black;
display:none;
}
.out .li1:hover a,.out .li2:hover a{
color:lightcoral;
}
.out .li1:hover ,.out .li2:hover{
background-color: gray;
}
.out .in li{
text-align: center;
height:50px;
line-height:50px;
}
.out .li1:hover .in{
display: block;
}
.out .li1:hover .in li:hover a{
color:lightblue;
}
.out .li1:hover .in li:hover{
background-color: grey;
}
效果图 【html+css写二级菜单】
文章图片
