                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /商城分類導(dǎo)航效果

為什么之前對(duì)a:hover的樣式定義影響了之后的其他div下的a:hover（下面css程序里倒數(shù)第二個(gè)樣式定義），要如何消除？

<!DOCTYPE html>

<html>

<head>

<title>電商分類導(dǎo)航</title>

</head>

<body>

<div id="topmnue">全部商品分類</div>

<ul>

<div>

<dl>

<dd>

</dd>

</dl>

<dl>

? ? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">數(shù)字音樂</a></dt>

? ? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">通俗流行</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">古典音樂</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">搖滾說唱</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">爵士藍(lán)調(diào)</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">鄉(xiāng)村民謠</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">有聲讀物</a>

? ? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">音像</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">音樂</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">影視</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">教育音像</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">游戲</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">文藝</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">小說</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">文學(xué)</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">青春文學(xué)</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">傳記</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">藝術(shù)</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">人文社科</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">歷史</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">心理學(xué)</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">政治/軍事</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">國(guó)學(xué)/古籍</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">哲學(xué)/宗教</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">社會(huì)科學(xué)</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">經(jīng)管勵(lì)志</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">經(jīng)濟(jì)</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">金融與投資</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">管理</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">勵(lì)志與成功</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">生活</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">家教與育兒</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">旅游/地圖</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">烹飪/美食</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">時(shí)尚/美妝</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">家居</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">婚戀與兩性</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">娛樂/休閑</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">健身與保健</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">動(dòng)漫/幽默</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">體育/運(yùn)動(dòng)</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">科技</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">科普</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">IT</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">建筑</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">醫(yī)學(xué)</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">工業(yè)技術(shù)</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">電子/通信</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">農(nóng)林</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">科學(xué)與自然</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">少兒</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">少兒</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">0-2歲</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">3-6歲</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">7-10歲</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">11-14歲</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">教育</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">教材</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">中小學(xué)教輔</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">考試</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">外語學(xué)習(xí)</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

? ? ? ? ? ? ? ? ? ?<dl>

? ? ? ? ? ? ? ? ? ? ? ?<dt><a href="#">其它</a></dt>

? ? ? ? ? ? ? ? ? ? ? ?<dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">英文原版書</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">港臺(tái)圖書</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">工具書</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">套裝書</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">雜志/期刊</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ?</dl>

</div>

<div>

<div>

<dl>

<dd><a href="#">美的官方旗艦店</a></dd>

<dd><a href="#">蘇泊爾官方旗艦店</a></dd>

<dd><a href="#">九陽(yáng)官方旗艦店</a></dd>

<dd><a href="#">東菱官方旗艦店</a></dd>

<dd><a href="#">小熊官方旗艦店</a></dd>

</dl>

</div>

</li>

</ul>

</div>

</body>

</html>

*{
	margin:?0;
	padding:?0;
	font-size:?14px;
	font-family:?Microsoft?Yahei;
}

#mainnavi{
	width:?222px;
	border:?solid?3px?red;
	position:?relative;
	z-index:?3;
}

#topmnue{
	background:?red;
	font-size:?16px;
	color:?white;
	padding-left:?20px;
	padding-top:?10px;
	padding-bottom:?10px;
	line-height:?20px;
	height:?20px;
}

ul{
	list-style:?none;
}

a{
	display:?block;
	text-decoration:?none;
	color:?black;
	margin-left:?7px;
	padding-bottom:?10px;
	height:?20px;
	line-height:?20px;
	width:?222px;
}

#mainnavi?ul?li:hover{
	border:?solid?1px?#DDD;
	border-right:?0;
	box-shadow:?0?0?8px?#DDD;
	-moz-box-shadow:?0?0?8px?#DDD;
	-webkit-box-shadow:?0?0?8px?#DDD;
}

#mainnavi?ul?li:hover?span{
	display:?inline-block;
	background-color:?white;
	height:?31px;
	width:?7px;
	position:?absolute;
	top:?40px;
	left:?215px;
	z-index:?30;
}

#mainnavi?ul?li?a:hover{
	text-decoration:?underline;
	color:?red;
	font-weight:?bold;
}

#mainnavi?ul?li:hover?.submnue{
	display:?block;
}

.submnue{
	position:?absolute;
	left:?220px;
	top:?30px;
	z-index:?4;
	width:?800px;
	border:?solid?1px?#DDD;
	border-right:?0;
	box-shadow:?0?0?8px?#DDD;
	-moz-box-shadow:?0?0?8px?#DDD;
	-webkit-box-shadow:?0?0?8px?#DDD;
}

.left{
	float:?left;
	width:?550px;
	background-color:?white;
}

.right{
	float:?left;
	margin-left:?10px;
	width:?240px;
}

.left?dl{
	display:?block;
	overflow:?hidden;
	border-bottom:?solid?1px?#ccc;?
	margin-left:?10px;
	margin-top:?10px;
	margin-bottom:?4px;
}

.left?dl?dt{
	display:?block;
	float:?left;
	width:?60px;
	text-align:?right;
	height:?22px;
	margin-right:?10px;
}

.left?dl?dt?a{
	width:?60px;
	height:?22px;
	font-size:?11px;
	font-weight:?bold;
	text-decoration:?underline;
	color:?red;
}

.left?dl?dd{
	display:?block;
	overflow:?hidden;
}

.left?dl?dd?a{
	display:?block;
	float:?left;
	width:?60px;
	height:?14px;
	line-height:?14px;
	font-size:?10px;
	font-weight:?none;
????color:?#737373;
????text-decoration:?none;
????border-left:?solid?1px?#ccc;
????margin-bottom:?8px;
????padding:?4px;
}

.right?.right_bottom?dl?dt{
	font-weight:?bold;
	font-size:?12px;
	color:?red;
}

.right?.right_bottom?dl?dd{
	margin:?3px?0;
}

.right?.right_bottom?dl?dd?a{
	color:?#737373;
	font-size:?10px;
	line-height:?22px;	
}

.right?.right_bottom?dl?dd?a:hover{
	color:?black;
	font-weight:?normal;
}

.right_bottom{
	position:?absolute;
	bottom:?60px;
	left:?570px;
}