今天教大家二级菜单，首先看下效果图。
image
编写方法见下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/jianbian.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
先在html里面写出一级菜单，然后在每一个一级菜单里面套入二级菜单。
接着在css里面写入样式，对位置和列表样式进行修改：
*{
padding: 0;
margin: 0；
}
.menu ul li{
list-style: none;
background-color: burlywood;
width: 120px;
text-align: center;
height: 40px;
position: relative
}
.menu ul li a{
text-decoration: none;
display: block;
line-height: 40px
}
.menu ul li:hover{
background-color: aqua
}
.menu ul li ul{
display: none;
position: absolute;
left: 120px;
top: 0
}
.menu ul li:hover ul{
display: block
}
在这里我需要强调一下，一级菜单是父元素，定位方式要设置为relative,二级菜单是子元素，定位方式要设置为absolute，这样二级菜单才会出现在一级菜单相对应的位置。然后通过dispiay属性来对二级菜单进行隐藏和显示就可以了。
