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 - 获取背景颜色填充下拉菜单

回答

相关问题