2013-02-01 127 views
1
#menu {float:left; margin:0; padding:0; list-style-type:none; width:100%; border:1px solid #BBBBBB; background-color:#FFFFFF;} 
#menu li {display:list-item; float:left;} 
#menu a:link,a:visited {border-right:1px solid #BBBBBB; display:block; float:left; padding:10px 15px; color:#AAAAAA; text-decoration:none; font-weight:bold; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;} 
#menu a:hover,a:active {background-color:#0096FF; color:#FFFFFF; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;} 

這是HTML:CSS樣式適用於所有情況?

<div id='header'> 
<a href='index.html'><img src='logo.png' /></a> 
</div> 
<ul id='menu'> 
<li><a href='index2.html'>HOME</a></li> 
<li><a href='index.html'>FORUM</a></li> 
</ul> 

的問題是,我有UL也獲得這些屬性之前,另一個鏈接。我將如何製作,只有UL內部的鏈接才能獲得這些屬性,而不是之前(UL之外)的鏈接。

+3

類似'#menu UL了'? – cha0site

回答

3

改變這種

#menu a:link,#menu a:visited {border-right:1px solid #BBBBBB; display:block; float:left; padding:10px 15px; color:#AAAAAA; text-decoration:none; font-weight:bold; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;} 
#menu a:hover,#menu a:active {background-color:#0096FF; color:#FFFFFF; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;} 

你忘記之前把#menu:參觀和:積極

+0

謝謝,它的工作! – user1768788