簡單的導航欄在CSS問題，可能是一個非常簡單的答案

所以即時通訊只是試圖做一個簡單的導航欄菜單，其下面有一個4px的邊框，當你將鼠標懸停在它上面時。這本身並不難，但我試圖設計它，以便不同的菜單元素具有不同的顏色。這是我到目前爲止有：簡單的導航欄在CSS問題，可能是一個非常簡單的答案

HTML

<div id="navcontainer"> 
<ul id="navlist"> 
<li id="active"><a href="#" class="home">Home</a></li> 
<li><a href="#" class="about">About</a></li> 
<li><a href="#" class="portfolio">Portfolio</a></li> 

</ul> 
</div>

CSS

/*Menu*/ 

#navlist 
{ 
margin: 0; 
padding: 0 0 20px 10px; 
} 

#navlist ul, #navlist li 
{ 
margin: 0; 
padding: 0; 
display: inline; 
list-style-type: none; 
} 

#navlist a:link, #navlist a:visited 
{ 
float: left; 
line-height: 14px; 
font-weight: bold; 
margin: 0 10px 4px 10px; 
text-decoration: none; 
color: #999; 
} 
#navlist a:hover { color: #000; } 

#navlist li .home { 
color: #d43f3f; 
} 

#navlist li .home a:hover 
{ 
border-bottom: 4px solid #d43f3f; 
padding-bottom: 2px; 
background: transparent; 
color: #d43f3f; 
} 
#navlist li .about { 
color: #00ace9; 
} 

#navlist li .about a:hover 
{ 
border-bottom: 4px solid #00ace9; 
padding-bottom: 2px; 
background: transparent; 
color: #00ace9; 
} 
#navlist li .portfolio { 
color: #6a9a19; 
} 

#navlist li .portfolio a:hover 
{ 
border-bottom: 4px solid #6a9a19; 
padding-bottom: 2px; 
background: transparent; 
color: #6a9a19; 
}

它顯示了不同的顏色，但懸停功能的心不是我的4PX邊境工作... :(

來源

2013-02-28 BoneStarr

這真的很簡單，你在CSS中有兩個聲明：

#navlist li .portfolio a:hover {

.portfolio是a元素。您使用的聲明意味着：a這是.portfolio的子項，它是li的子項，它是#navlist的子項。你太深了。

這將工作：

#navlist li a.portfolio:hover {

工作小提琴：http://jsfiddle.net/jnbBz/1/

完全糾正CSS：

/*Menu*/ 

#navlist 
{ 
margin: 0; 
padding: 0 0 20px 10px; 
} 

#navlist ul, #navlist li 
{ 
margin: 0; 
padding: 0; 
display: inline; 
list-style-type: none; 
} 

#navlist a:link, #navlist a:visited 
{ 
float: left; 
line-height: 14px; 
font-weight: bold; 
margin: 0 10px 4px 10px; 
text-decoration: none; 
color: #999; 
} 
#navlist a:hover { color: #000; } 

#navlist li .home { 
color: #d43f3f; 
} 

#navlist li .home:hover 
{ 
border-bottom: 4px solid #d43f3f; 
padding-bottom: 2px; 
background: transparent; 
color: #d43f3f; 
} 
#navlist li .about { 
color: #00ace9; 
} 

#navlist li .about:hover 
{ 
border-bottom: 4px solid #00ace9; 
padding-bottom: 2px; 
background: transparent; 
color: #00ace9; 
} 
#navlist li .portfolio { 
color: #6a9a19; 
} 

#navlist li a.portfolio:hover 
{ 
border-bottom: 4px solid #6a9a19; 
padding-bottom: 2px; 
background: transparent; 
color: #6a9a19; 
}

來源

2013-02-28 23:49:56

LOL現在感覺有點不舒服......但是謝謝......晚上太晚了：D – BoneStarr 2013-02-28 23:52:31

需要更多的咖啡;）如果你已經很難找到它，工作時間太長。接受，如果它解決了你的問題puh-lease;） – 2013-02-28 23:53:18

你有你的選擇錯誤

#navlist li .about應以#navlist li a.about爲例

來源

2013-02-28 23:55:45

簡單的導航欄在CSS問題，可能是一個非常簡單的答案

回答

相關問題