摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!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="font-awesome/css/font-awesome.min.css">
<style>
*{padding: 0;margin: 0}
a{text-decoration: none;color:#6C6C6C;font-size: 12px}
a:hover{cursor: pointer;color: coral}
.clear{clear: both;}
li{list-style: none}
.red{color: red}
.head{width: 100%;background-color:#f5f5f5;}
.nav{width: 70%;margin: 0 auto;height: 40px;line-height: 40px;}
.nav ul li a{display: inline-block;padding:0px 8px;}
.nav_left{float: left;}
.nav_right{float: right;}
.nav ul>li{float: left;position: relative;}
.nav_bj:hover{background-color:#fff}
.nav ul li .son{display: none;width: 100%;position: relative;top: -2px;background:#f5f5f5;border: #ccc 1px solid}
.nav ul li .son a{display: block;width: 100%;padding: 0}
.son a:hover{background-color:#fff}
.nav ul>li:hover .son{display: block}
.nav ul>li:hover .nav-a{background-color:#ccc}
</style>
</head>
<body>
<div class="head">
<div class="nav">
<!-- left -->
<div class="nav_left">
<ul>
<li class="nav-a"><a href="">中国大陆<i class="fa fa-angle-down"></i></a>
<div class="son">
<a href="">1</a>
<a href="">1</a>
<a href="">1</a>
</div>
</li>
<li class="nav-a"><a href="">消息<i class="fa fa-angle-down"></i></a>
<div class="son">
<a href="">2</a>
<a href="">2</a>
<a href="">2</a>
</div>
</li>
<li><a href="" class="red">逛逛</a></li>
</ul>
</div>
<!-- right -->
<div class="nav_right">
<ul>
<li class="nav_bj nav-a"><a href="">我的淘宝<i class="fa fa-angle-down"></i></a>
<div class="son">
<a href="">3</a>
<a href="">3</a>
<a href="">3</a>
</div>
</li>
<li class="nav-a"><a href=""><i class="fa fa-shopping-cart red"></i> 购物车<i class="fa fa-angle-down"></i></a>
<div class="son">
<a href="">4</a>
<a href="">4</a>
<a href="">4</a>
</div>
</li>
<li><a href=""><i class="fa fa-heart"></i> 收藏夹</a></li>
<li><a href="">联系客服</a></li>
<li><a href="">卖家中心</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
.nav ul>li:hover .nav-a{background-color:#ccc}
样式里这个行不知道为什么没有显示效果!下拉时鼠标在子菜单时也要给父li一个合适的背景颜色 ,这个不知道为啥没有显示
批改老师：灭绝师太批改时间：2019-01-25 11:44:51
老师总结：选择器是为了让你在选择元素的时候更加方便，你的写法却只有更复杂，nav-a：hover{}直接这样写就可以了
