如何使用css實現舊版京東網站導航

這篇文章給大家分享的是有關如何使用css實現舊版京東網站導航的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　div 高度+ div底部邊框高度，底部邊框顏色設置紅色。版心div里兩個子級div左浮動。左側導航分類上部用div.dt 下部用div.dd，它們之間是兄弟關系。

　　知識點：li里面的字數不一樣多，不能給寬度，直接讓左右padding撐開寬度。

　　html結構：

<!--導航begin-->
	<div class="nav">
		<div class="w">
			<div class="dropdown fl">
				<div class="dt">全部商品分類</div>
				<div class="dd">
					<ul>
						<li class="menu_item"><a href="">家用電器</a><i>?</li>
						<li class="menu_item"><a href="">手機 / 運營商 / 數碼</a><i>?</li>
						<li class="menu_item"><a href="">電腦 / 辦公</a><i>?</li>
						<li class="menu_item"><a href="">家居 / 家具 / 家裝 / 廚具</a><i>?</li>
						<li class="menu_item"><a href="">男裝 / 女裝 / 童裝 / 內衣</a><i>?</li>
						<li class="menu_item"><a href="">美妝 / 個護清潔 / 寵物</a><i>?</li>
						<li class="menu_item"><a href="">女鞋 / 箱包 / 鐘表 / 珠寶</a><i>?</li>
						<li class="menu_item"><a href="">男鞋 / 運動 / 戶外</a><i>?</li>
						<li class="menu_item"><a href="">房產 / 汽車 / 汽車用品</a><i>?</li>
						<li class="menu_item"><a href="">母嬰 / 玩具樂器</a><i>?</li>
						<li class="menu_item"><a href="">食品 / 酒類 / 生鮮 / 特產</a><i>?</li>
						<li class="menu_item"><a href="">藝術 / 禮品鮮花 / 農資綠植</a><i>?</li>
						<li class="menu_item"><a href="">醫(yī)藥保健 / 計生情趣</a><i>?</li>
						<li class="menu_item"><a href="">圖書 / 文娛 / 教育 / 電子書</a><i>?</li>
						<li class="menu_item"><a href="">機票 / 酒店 / 旅游 / 生活</a><i>?</li>
					
					</ul>
				</div>
			</div>
			<div class="navitems fl">
				<ul>
					<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>
					<li><a href="">團購</a></li>
					<li><a href="">拍賣</a></li>
					<li><a href="">金融</a></li><li><a href="">有趣</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!--導航end-->

　　css代碼：

/*導航*/
.nav {
	height: 45px;
	border-bottom: 2px solid #b1191a;
}

.dropdown {
	width: 209px;
	height: 45px;
	
}

.dropdown .dt{
	width: 100%;
	height: 100%;
	background-color: #B1191A;
	font-size: 16px;
	color: #fff;
	text-align: center;
	line-height:45px ;
}

.dropdown .dd{
	height: 465px;
	background-color: #C81623;
	margin-top: 2px;
}

.menu_item   i{
	font-family: 'icomoon';
	float: right;
	font-size: 18px;
	color: #fff;
}

.menu_item {
	height: 31px;
	line-height: 31px;
	padding: 0 10px;
	margin-left: 1px;
}

.menu_item:hover {
	background-color: #fff;
	
}
.menu_item:hover a {  /*鼠標經過li a里字體變色*/
	color: #C81623;;
}
.menu_item a{
	font-size: 14px;
	color: #FFFFFF;
}

.navitems li {
	float: left;
}

.navitems li a {
	display: block;
	height: 45px;
	padding: 0 25px;
	line-height: 45px;
	font-size: 16px;
}

.navitems {
	margin-left: 10px;
}

感謝各位的閱讀！關于“如何使用css實現舊版京東網站導航”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！