index.html代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01.常用导航布局案例(仿淘宝导航条)</title> <link rel="stylesheet" type="text/css" href="../css/index2.css"> <link rel="stylesheet" type="text/css" href="../static/font-awesome/css/font-awesome.min.css"></head><body> <div class="header"> <div class="header_content"> <div class="header_left"> <a href="" class="header_a">中国大陆 <i class="fa fa-angle-down"></i></a> <a href="" style="color:#FF5000;">亲，请登录</a> <a href="">免费注册</a> <a href="">手机逛淘宝</a> </div> <div class="header_right"> <a href=" " class="header_a">我的淘宝 <i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href=" "><span class="fa fa-cart-plus" style="color:#FF5000;"></span> 购物车</a> <a href=" " class="header_a"><span class="fa fa-star"></span> 收藏夹<i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href=" " class="header_a">商品分类</a> <a href=" ">千牛卖家中心 <i class="fa fa-angle-down"></i></a> <a href=" " class="header_a">联系客服 <i class="fa fa-angle-down"></i></a> <a href=" " class="header_a"><span class="fa fa-align-justify" style="color:#FF5000;"></span>网站导航 <i class="fa fa-angle-down" style="color:#FF5000;"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> <li>我的足迹</li> <li>我的足迹</li> </ul> </a> </div> </div> <div class="clear"></div> </div></body></html>
index2.css代码如下：
*{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_a{display:inline-block;height:40px;width:90px;text-align:center;position:relative;}.header_a:hover{background:#fff;}.header_a ul{border:1px solid #F5F5F5;display:none;border-top:none;}.header_a:hover ul{display:block;position:absolute;width:100px;}.header_a ul li:hover{background-color:#F5F5F5;} .header_a ul li{color:#6c6c6c;height:30px;line-height:30px;text-align:left;padding:0px 3px;margin:5px 0px;}
