CSS - 獲取背景顏色填充下拉菜單

CSS新手。我有一個導航菜單欄，當您將鼠標懸停在「投資組合」下方的下拉菜單中時，我正試圖填充背景顏色（藍色）。有任何想法嗎？我認爲它是因爲那個絕對？CSS - 獲取背景顏色填充下拉菜單

CSS：

#nav, #nav ul { 
float: left; 
list-style: none; 
box-shadow: 0px 1px 7px #000000; 
background-color: #F5F1DE; 
border-radius: 5px 5px 0px 0px; 
z-index: 100; 
} 

#nav li a { 
display: block; 
padding: 16px; 
text-decoration: none; 
font-weight: bold; 
color: black; 
border-left: 1px solid #ccc; 
font-size: 1em; 
} 

#nav li a:hover { 
color: black; 
background-color: #bbecff; 
} 

#nav li { 
float: left; 
} 

#nav li ul { 
position: absolute; 
width: 11em; 
left: -999em; 
border-radius: 1px; 
} 

#nav li:hover ul, #nav li.sfhover ul { 
left: auto; 
}

HTML：

<ul id="nav"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Packages</a></li> 
<li><a href="#">Portfolio</a> 
    <ul> 
     <li><a href="#">Weddings</a></li> 
     <li><a href="#">Special Events</a></li> 
     <li><a href="#">Holidays</a></li> 
     <li><a href="#">Fresh Flowers</a></li> 
     <li><a href="#">Balloon Sculptures</a></li> 
    </ul> 
</li> 
<li><a href="#">Contact</a></li> 
</ul>

來源

2013-03-12 Anthony Reyna

只爲ul第一個孩子添加float:left .Update您以下CSS的行：

#nav li {float: left;}

到

#nav > li {float: left;}

這裏是fiddle

來源

2013-03-12 05:50:05

Make this correct回答如果這是正確的。 – 2013-03-12 09:28:23

真棒工作 - 但你將如何擺脫在家裏和子菜單下的縮進？ – 2013-03-12 14:43:30

我修正了它 - 添加填充0px到#nav，#nav ul和#nav li ul 。 – 2013-03-12 15:54:21

#nav li:hover ul, #nav li.sfhover ul { 
    background-color: #bbecff; 
}

但隨着中說：你爲什麼不適用background-color直接子菜單ul？

來源

2013-03-12 05:41:47

試試這個，希望它會工作的ü

的CSS

#nav li ul{ 
background:#0066CC; 
}

來源

2013-03-12 05:44:11

-1

ü也可以嘗試這個，我甲肝給予id添加到相應的李

<li id=blueColor> 
     <li><a href="#">Weddings</a></li> 
     <li><a href="#">Special Events</a></li> 
     <li><a href="#">Holidays</a></li> 
     <li><a href="#">Fresh Flowers</a></li> 
     <li><a href="#">Balloon Sculptures</a></li> 
    </ul>

在CSS

#blueColor:hover{ 
backgroung-color:blue 
}

來源

2013-03-12 05:46:19 xCoder

使用ID不是必需的這裏。 – 2013-03-12 05:49:37

@linus如果你提供了id，怎麼了？你可以更具體地使用它 – xCoder 2013-03-12 05:50:34

沒有說這是錯誤的，只是你錯過了「在id周圍，不需要這個ID，這就是全部 – 2013-03-12 05:54:38

給背景顏色以下

#nav li:hover ul, #nav li.sfhover ul

來源

2013-03-12 05:58:01

CSS - 獲取背景顏色填充下拉菜單

回答

相關問題