摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>导航栏</title>
<!-- <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css"> -->
<style type="text/css" media="screen">
*{margin:0;padding:0;font-size:12px;}
.wraper{width:100%;height:35px;line-height:35px;background-color:#f5f5f5;border-bottom:1px solid #eee;}
.header{width:70%;margin:0 auto;}
.header ul li{list-style:none;margin-right:7px;padding: 0 6px;}
.header .header-left{height:35px;width:30%;display: inline-block;}
.header .header-left ul{height:35px;width:100%;}
.header .header-left ul li{float:left;}
.header ul li span{color:#6C6C6C;}
.header .header-right{width:50%;height:35px;float:right;display: inline-block;}
.header .header-right ul li{float:right;}
.header ul li span:hover{color:#f22e00;}
.header ul li ul li{float:none;width:80px;}
.area{position:relative;}
.erji{display:none;position:absolute;left:-1px;background-color:#FFF;text-align:left;}
.area:hover{background-color:#FFF;}
.area:hover .erji{display:block;background-color:#FFF;}
</style>
</head>
<body>
<div>
<div>
<div>
<ul>
<li style="color:#000">中国大陆<span class="fa fa-sort-desc"></span>
<ul>
<li>台湾</li>
<li>香港</li>
<li>日本</li>
<li>澳大利亚</li>
<li>更多</li>
</ul>
</li>
<li style="color:#f22e00;">亲,请登录</li>
<li><span>免费注册</span></li>
<li><span>手机逛淘宝</span></li>
</ul>
</div>
<div>
<ul>
<li><span>网站导航</span></li>
<li><span>卖家中心</span></li>
<li><span>商品分类</span></li>
<li><span>收藏夹</span></li>
<li><span>购物车</span></li>
<li class="area"><span>我的淘宝</span>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;">
</div>
</div>
</div>
</body>
</html>
