HTML DIV+CSS——導航欄A標籤的hover特效

爲了支持IE6：做A標籤hover特效加底色或邊框時，不要將A標籤變塊級應變成浮動元素，同時加相對定位relative。

效果如下圖：

HTML代碼如下：

<div id="menu_out">
		<div id="menu">
			<div class="category">
				<a href="">全部商品分類</a>
			</div>
			<div class="menu_list">
				<ul>
					<li class="menu_first" ><a href="">首頁</a></li>
					<li><a href="">電器城</a></li>
					<li><a href="">紅孩子母嬰</a></li>
					<li><a href="">繽購美妝</a></li>
					<li><a href="">書城</a></li>
					<li><a href="">團購</a></li>
				</ul>
				<a href="" class="menu_guanggao"><img src="images/1387095198726.jpg" alt="" /></a>
			</div>
		</div>
	</div>

css代碼如下：

#menu_out #menu .menu_list ul li a{
		/*display: block;*/
		float: left;
		color: #333;
		padding: 0 23px;
		text-align: center;
		height: 34px;
		line-height: 34px;
	}
	#menu_out #menu .menu_list ul li a:hover{
		/*IE6下加以下屬性纔會有左右邊框*/
		position: relative;
		/*IE6下加以上屬性纔會有左右邊框*/
		margin: 0px -1px 0px;
		text-decoration: none;		
		background: #F9F9F9;
		border-right: 1px solid #EFEFEF;
		border-left: 1px solid #EFEFEF;
	}