Question

我不知道如何使用CSS来设计引导下拉菜单的样式。

我可以设法让背景颜色改变，但那就是它。链接没有下划线，悬停背景颜色不会改变。我还没有开始使用向下箭头！有什么建议吗？

下面是代码尝试：

#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}

Answer 1

希望这会有所帮助。

ul.dropdown-menu {
    border-bottom: 5px solid #CCC;
}

.dropdown-menu li:hover {
    text-decoration: underline;
}

我有点困惑你想要用下拉菜单中列表项的背景颜色做什么。这是在鼠标悬停在每个链接上时更改背景颜色的一种方法示例。在某些情况下，当您想要覆盖任何后续规则时，在CSS属性之后使用！important可能会有所帮助（但它可能不是最好的方法）。我建议您打开Chrome开发工具并玩一下，直到获得所需的结果。我假设你想要改变列表项目的背景颜色，当悬停到不同于你指定的颜色时（＃273961），因为它已经是那种颜色开始了吗？

.dropdown-menu li a:hover {
    background-color: red !important;
}

Bootstrap菜单样式

1 个答案: