使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级导航菜单的ul标签
注意：
1.二级菜单的hover事件一定要写在父元素才起作用
2.为了防止导航栏下面的banner图或内容盖住二级菜单，需要给导航栏定位， 来提高二级菜单的层级，父元素相对定位，子元素绝对定位（子绝父相）
3.定位之后，二级菜单的宽将不再继承它父元素的宽，需要重新定义，否则它将被内容撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 设置父容器样式 */
.container{
width: 380px;
height: 500px;
background-color: aliceblue;
margin: 0 auto;
}
/* 选中每一个菜单项 */
.container ul li{
float: left;
width: 120px;
height: 36px;
line-height: 36px;
background-color: darkcyan;
text-align: center;
border: 1px solid white;
position: relative;
}
/* a标签样式 */
a{
color: white;
text-decoration: none;
}
/* 二级菜单默认隐藏 */
.container ul li ul{
position: absolute;
display: none;
}
/* 每一个一级菜单的li加一个hover效果 */
.container ul li:hover{
background-color: rgba(0,139,139, 0.6);
}
/* 当一级菜单hover时 二级菜单显示 */
.container ul li:hover ul{
display: block;
cursor: pointer;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!-- 一级菜单 -->
<ul>
<li>
<a href="#">一级菜单1</a>
<!-- 二级菜单 -->
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
</ul>
<p>小桥流水人家</p>
</div>
</body>
</html>
