CSS - 获取背景颜色填充下拉菜单

Question

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> 

Answer 1

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

#nav li {float: left;} 

到

#nav > li {float: left;} 

这里是fiddle

Answer 2

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

但随着中说：你为什么不适用background-color直接子菜单ul？

Answer 3

试试这个，希望它会工作的ü

的CSS

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

Answer 4

ü也可以尝试这个，我甲肝给予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 
} 

Answer 5

给背景颜色以下

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