仿淘宝导航条样式

导航条

  使用的css属性：
      1. text-decoration:none 链接去掉下划线
      2. float:left 左浮动； right右浮动
      3. clear:both 清除左右浮动
      4. text-align:文本格式 center水平居中；left居中 ；right居右
      5. line-height:40px；在高为40的标签下内容垂直居中
      6. display:none      样式不显示 
      7. position:absolute 绝对位置:它会寻找父元素位置，没有父元素则是相对于body而言
         position:relation 相对位置：相对于便签本身在文档中的位置
      8. margin: 外边距
      9. padding:内间距
      10.  .header_a:hover div{} 当鼠标覆盖到class为header_a的标签时div的显示样式为{}
           .header_a:hover       当鼠标覆盖到class为header_a的标签时的显示样式

1. CSS部分

		*{margin:0px;padding: 0px;}
		a{text-decoration: none;font-size: 12px;color: #6c6c6c;margin-right:5px;}
		li{list-style: none}
		.clear{clear: both;}
		.header{width: 100%;background: #f5f5f5;}
		.header_content{width: 990px;margin: 0px auto;line-height: 35px;}
		.header_left{height: 35px;float: left;text-align: center;}
		.header_content a:hover{color: #ff5000}
		.header_right{height: 35px;float: right}
		.header_a {display: inline-block;height: 40px;width: 80px;text-align: center;position: relative;}
		.header_a:hover{background-color:#fff }
		.header_a ul{border: 1px solid #f5f5f5;display: none;position: absolute;width:80px; border-top: none}
		.header_a:hover ul{display: block;}
		.header_a ul li{color: #6c6c6c;height: 25px;line-height: 25px;text-align: left;padding: 0px 3px;margin:5px 0px;}
		.header_a ul li:hover{background-color: #f5f5f5;}
		/*网站导航下拉部分*/
		.header_a div{width:900px;height: 140px;background:#fff;float: right;display: none;border: 1px solid #f5f5f5;}
		.header_a:hover div{display: block;border-top: none;} 
		.header_a table {padding: 15px 0px;}
		.header_a table th{padding: 10px; text-align: left;}
		.header_a table td{padding: 5px 15px;}
		.td{border-left:1.5px solid #f5f5f5;}

2. html部分

<div class="header">
		<div class="header_content">
			<div class="header_left">
			    <a href="" href="" class="header_a">中国大陆&nbsp; <i class="fa fa-angle-down"></i></a>
				<a href="" href="" style="color: #FF5000">亲，请登录</a>
				<a href="" href="">免费注册</a>
				<a href="" href="">手机逛淘宝</a>
			</div>
			<div class="header_right">
				<a href="" href="" class="header_a">我的淘宝&nbsp; <i class="fa fa-angle-down"></i>
					<ul>
						<li>已买到的宝贝</li>
						<li>我的足迹</li>
					</ul>
				</a>
				<a href="" href=""><span class="fa fa-cart-plus" style="color: #FF5000"></span>&nbsp;购物车&nbsp; <i class="fa fa-angle-down"></i></a>
				<a href="" href="" class="header_a"><span class="fa fa-star"></span>&nbsp;收藏夹&nbsp; <i class="fa fa-angle-down"></i>
					<ul>
						<li>收藏的宝贝</li>
						<li>收藏的店铺</li>
					</ul>
				</a>
				<a href="" href="" >商品分类</a>
				<a href="" href="" class="header_a">卖家中心&nbsp; <i class="fa fa-angle-down"></i>
					<ul>
						<li>免费开店</li>
						<li>已卖出的宝贝</li>
						<li>出售中的宝贝</li>
					</ul>
				</a>
				<a href="" href="" >联系客服</a>
				<a href="" href="" class="header_a"><span class="fa fa-reorder" style="color: #FF5000"></span>&nbsp;网站导航&nbsp; <i class="fa fa-angle-down"></i>
						<div>
							<table style="table-layout : fixed;">
								<tr>
									<th colspan="4" >主题市场</th>
									<th colspan="3" class="td">特色购物</th>
									<th colspan="3" class="td">当前热点</th>
									<th colspan="3" class="td">更多精彩</th>
								</tr>
								<tr>
									<a href="" ><td>女装</td></a>
									<a href=""><td>男装</td></a>
									<a href=""><td>鞋靴</td></a>
									<a href=""><td>箱包</td></a>
									<a href=""><td class="td">淘宝女人</td></a>
									<a href=""><td>淘宝男人</td></a>
									<a href=""><td>中老年</td></a>
									<a href=""><td class="td">天天中奖</td></a>
									<a href=""><td>新鲜土货</td></a>
									<a href=""><td>美裙装</td></a>
									<a href=""><td class="td">阿里旺旺</td></a>
									<a href=""><td>支付宝</td></a>
									<a href=""><td>点点虫</td></a>	
								</tr>
								<tr>
									<a href=""><td>婴童</td></a>
									<a href=""><td>美妆</td></a>
									<a href=""><td>食品</td></a>
									<a href=""><td>珠宝</td></a>
									<a href=""><td class="td">咸鱼</td></a>
									<a href=""><td>拍卖会</td></a>
									<a href=""><td>全球购</td></a>
									<a href=""><td class="td">美白修复</td></a>
									<a href=""><td>热卖单鞋</td></a>
									<a href=""><td>智能数码</td></a>
									<a href=""><td class="td">买房租房</td></a>
									<a href=""><td>大众审评</td></a>
									<a href=""><td>天猫进口</td></a>
								</tr>
							</table>
						</div>
					</ul>
				</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>	

2. 运行结果