Question

我尝试从列表和:hover事件更改背景颜色创建菜单。菜单中可以下拉的项目有class .dropdown，我无法让它们在悬停事件中更改背景颜色。

这是我的HTML代码：

<nav id="menubar">
    <ul id="menu">
        <li class="dropdown"><a href="#">Company</a></li>
        <li class="selected dropdown"><a href="#">Products</a></li>
        <li class="dropdown"><a href="#">News</a></li>
        <li class="dropdown"><a href="#">Downloads</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

这是我制作的CSS：

// no dropdown items
#menubar #menu li a {
    text-decoration: none;
    padding: 1.2em 1.6em 1.2em 1.6em;
    color: grey;
    border-radius: 8px;
    border: 1px solid white;
}
#menubar #menu li a:hover {
    color: white;
    background-color: #36C7E3;
}
// dropdown items
#menubar #menu .dropdown a {
    background:url('http://www.portalworkbook.com.br/static/admin/img/select-caret.png') no-repeat right 25px;
}
#menubar #menu .dropdown a:hover {
    background-color: #36C7E3;
    background:url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;
}

我的问题是FIDDLE。

有没有解决方案？

Answer 1

因为background属性会覆盖background-color
只需在背景网址之前添加颜色，如下所示： background: #36C7E3 url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;

检查demo

Answer 2

您只需要为每个输入完整的属性名称：

#menubar #menu li.dropdown a:hover {
    background-color: #36C7E3;
    background-image:url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;
}

或者，您可以使用背景速记并在一行中指定所有内容：

background: #36C7E3 url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;

Answer 3

您添加背景图片尝试删除它然后它将工作：

#menubar #menu .dropdown a:hover {
    background-color: red;
}

如果您想同时使用图像和颜色，请将背景添加为

background-image：url（''）;

CSS列表菜单不会改变背景颜色

3 个答案: