<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;/*字体不要下划线*/
}
/*行内元素/块级元素*/
/*行内元素:img/input/a/span*/
/*a/span行内元素不能设置宽高*/
/*块级元素:div/ul/li/ol/p/form/table*/
/*display:none/block/inline*/
.nav{
font-size: 0px;
}
.nav>li{ /*nav>li下拉导航没有背景色*/
display: inline-block;/*在第一行显示*/
vertical-align: top; /*垂直顶对齐*/
width: 100px;
height: 30px;
font-size: 16px;/*字体大小*/
background: #CCCCCC;
text-align: center;/*字体居中*/
line-height: 30px;
}
.subnav{
display: none;/*隐藏*/
border: 1px solid lightblue;
}
.nav li:hover .subnav{
display: block;/*显示*/
}
.subnav li:hover{
color: red;
background:lightblue;
}
</style>
</head>
<body>
<!-- <span style="display:block;width:100px;background:red;">dd</span> -->
<ul class="nav">
<li>
<a href="">首页</a>
<ul class="subnav">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</li>
<li>
<a href="">新闻</a>
<ul class="subnav">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</li>
<li>
<a href=""> 地图</a>
<ul class="subnav">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</li>
</ul>
</body>
</html>