0

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>
4

5 回答 5

1

试试这个，希望它对你有用

添加CSS

#nav li ul{
background:#0066CC;
}
于 2013-03-12T05:44:11.083 回答
1

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

#nav li {float: left;}

到

#nav > li {float: left;}

这是小提琴

于 2013-03-12T05:50:05.170 回答
1

为以下内容提供背景颜色

 #nav li:hover ul, #nav li.sfhover ul
于 2013-03-12T05:58:01.233 回答
0 
#nav li:hover ul, #nav li.sfhover ul {
    background-color: #bbecff; 
}

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

于 2013-03-12T05:41:47.920 回答
0

你也可以试试这个，我已经给了id各自的 li

 <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-12T05:46:19.740 回答