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

【问题标题】：CSS - getting background color to fill drop down menuCSS - 获取背景颜色以填充下拉菜单
【发布时间】：2013-02-27 13:04:06
【问题描述】：

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>

【问题讨论】：

标签： html css xhtml

【解决方案1】：

给下面的背景色

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

【讨论】：

【解决方案2】：

你也可以试试这个，我已经给各自的李一个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
}

【讨论】：

这里不需要使用 ID。
@linus 如果你提供 id 有什么问题？？你可以更具体地使用它
没说错，只是你漏掉了id周围的"。id不需要，仅此而已。

【解决方案3】：

仅为ul 的第一个孩子添加float:left。更新您的以下css 行：

#nav li {float: left;}

到

#nav > li {float: left;}

这里是fiddle

【讨论】：

效果很好 - 但是你如何摆脱家旁边和子菜单下的缩进？
我修复了它 - 在 #nav、#nav ul 和 #nav li ul 中添加了填充 0px。

【解决方案4】：

试试这个，希望对你有用

添加 CSS

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

【讨论】：

【解决方案5】：

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

但话虽如此：为什么不直接将background-color 应用于子菜单ul？

【讨论】：