菜單與活躍李

也許新鮮的眼睛能看到我錯的，但我希望活動的菜單項有不同的風格。菜單與活躍李

HTML：

<div id="menu"> 
    <ul> 
     <li id="active"><a href="#">Home</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div>

而我的CSS ：

#menu ul {list-style-type: none;height: 40px;float: left;margin-top: 43px;margin-left:-32px;} 
#menu li { 
float: left; 
} 
#menu li #active { 
background: url(../images/menu-bg-hover.png) no-repeat; 
color: #ffffff; 
} 
#menu li a { 
background: url(../images/menu-bg.png) no-repeat; 
display: block; 
width: 100px; 
height: 40px; 
text-decoration: none; 
font-size: 16px; 
color: white; 
margin: 0 auto; 
text-align: center; 
padding-top: 10px; 
color:#424242; 
font-family: "Helvetica", Arial, sans-serif; 
}

來源

2012-10-19 TravisT6983

更新你的CSS來#menu li#active a，並將其置於#menu li a。這將確保樣式覆蓋默認樣式，在這種情況下是背景圖片和文本顏色。

#menu li #active強制瀏覽器查找li下的編號爲active的子元素。

來源

2012-10-19 16:54:29 Mathachew

非常感謝你...我顯然已經在這盯着太久太久...... – TravisT6983

剛剛修復的風格是這樣的：

#menu li#active { 
    background: url(../images/menu-bg-hover.png) no-repeat; 
    color: #ffffff; 
}

你寫它#menu li #active而非#menu li#active。

來源

2012-10-19 16:55:33 Aniket

刪除

#menu li #active { 
background: url(../images/menu-bg-hover.png) no-repeat; 
color: #ffffff; 
}

ADD

#menu #active a{ 
background: url(../images/menu-bg-hover.png) no-repeat; 
color: #ffffff; 
}

來源

2012-11-09 14:03:28

菜單與活躍李

回答

相關問題