摘要:<!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>