此方法与jquery导航栏效果一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
a {
text-decoration: none;
}
li{
list-style: none;
cursor: pointer;
}
/*总样式*/
.wrap {
100%;
height:46px;
line-height:45px;
background-color:pink;
position: relative;
}/*整个导航栏的样式*/
.first {
float: left;
height:46px;
10%;
text-align: center;
border-right:1px solid lightpink;
}/*一级导航的样式*/
#cart {
float: right;
margin-right: 1%;
}
#food {
border-left: 1px solid lightpink;
}
ul .first .second, ul .first .three, ul .first .four, ul .first .five {
border:1px solid pink;
border-top: none;/*实现一二级导航无缝显示*/
position: absolute;
40.3%;
display: none;
background-color:whitesmoke;
}/*二级导航样式（绝对定位+给定元素宽度实现二级导航宽过一级导航）*/
ul .first .second, ul .first .three, ul .first .four, ul .first .five{
left: 0;
}
.first:hover{
background-color:whitesmoke;
}
.first:hover div {
display: block;
}
/*!*css方法鼠标悬停显示二级导航*!*/
@media (max- 600px) {
.first {
50px;
}
ul .first .second, ul .first .three, ul .first .four, ul .first .five{
203px;
}
}/*解决屏幕变小样式变形问题*/
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="first" id="food" >
<h3 onmouseover="submenu(this)" onmouseout="hideMenu(this)">美食</h3>
<div class="second" >
<p>chapter one</p>
</div>
</li>
<li class="first" id="movie">
<h3>电影</h3>
<div class="three">
<p>chapter two</p>
</div>
</li>
<li class="first" id="travel">
<h3>旅游</h3>
<div class="four">
<p>chapter three</p>
</div>
</li>
<li class="first" id="hotel">
<h3>酒店</h3>
<div class="five">
<p>chapter four</p>
</div>
</li>
</ul>
<div id="cart"><h3>购物车</h3></div>
</div>
</body>
</html>