完成下拉菜单案例

摘要：<div class="header">     <div class="header_content">         <div class="header_left"> 

<div class="header">
     <div class="header_content">
         <div class="header_left">
         <a href="" calss="header_a">中国大陆&nbsp;
         <!-- <i class=" fa fa-andle-down"></i> --></a>
         <a href="" style="color:#ff5000;">亲，请登录</a>
         <a href="">免费注册</a>
         <a href="">手机逛淘宝</a>
     </div>
     <div class="header_right">
         <a herf="" calss="header_a">我的淘宝&nbsp;
         <ul>
            <li>已买到的宝贝</li>
            <li>我的足迹</li>
          </ul>
         </a>
         <a herf="">购物车 </a>
         <a herf="" calss="header_a">收藏夹</a>
         <a herf="">商品分类</a>
         <a herf="" calss="header_a">卖家中心<i calss=" fa fa-angle-down"></i></a>
         <a herf="" calss="header_a">联系客服</a>
         <a herf="" calss="header_a">网站导航</a>
      </div>
    </div>
   <div class="clera"></div>
</div>
</body>
</html>

*{margin: 0px;padding: 0px;}
a{text-decoration: none;color:#6c6c6c;font-size: 13px;}
li{list-style:none;}
.clear{clear:both;}
.header{width: 100%;background-color:#f5f5f5;}
.header_content{width:1200px;margin: 0px auto;line-height: 40px;}
.header_left{height:40px;float: left;}
.header_left a{margin-right: 5px;}
.header_content a:hover{color:#ff5000;}
.header_right{height: 40px;float: right;}
.header_right a{margin-right: 0px;float: left;}
.header_right a{display: inline-block;height: 40px;text-align:center;width: 90px;position: relative;}
.header_a:hover{background-color: #fff;}
.header_right a: ul{border:  1px solid #F5F5F5;display: none;border-top: none;}
.header_right a:hover ul{display: block;position: absolute;width: 100px;}
.header_right a ul li:hover{background-color: #F5F5F5;}
.header_right a ul li{color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin: 5px 0px;}

批改老师：韦小宝批改时间：2019-01-05 09:05:22
老师总结：写的很不错！下拉菜单在日常的开发中还是很常见！使用当然也是比较频繁的！