设置引导下拉菜单的样式

Question

我不知道为什么我的CSS没有打到HTML并正确设置样式。

HTML：

<li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 2 <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Page 2.0.0 </a></li>
        <li class="divider"></li>
        <li><a href="#">Page 2.0.1 </a></li>
        <li class="divider"></li>
        <li><a href="#">Page 2.0.2 </a></li>
    </ul>
</li>

CSS：

.dropdown-menu li:hover{
    background-color: green;
}

应该点击类dropdown-menu ，然后将鼠标悬停在li的内部。 我尝试过添加一个ID作为下拉菜单，并将CSS更改为#dropdown-menu但这没有什么区别。
另外，是否有一种简单的方法可以准确地找到如何击中适当的元素，因为我发现这是一个常见的问题？

Answer 1

好，我们走了，

这是您问题的有效解决方案，

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    clear: both;
   background-color: green !important;
   background-image:none !important; 
    display: block;
    font-weight: 400;
    line-height: 1.42857;
    padding: 3px 20px;
    white-space: nowrap;
    color: black !important;
}

我刚刚编辑了您的代码http://jsfiddle.net/bf1cyptm/1/

:)

Answer 2

尝试在CSS中添加!important ，例如：

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

如果不起作用，则可能是其他一些CSS代码无法实现。 因此，解决方案是做一个检查元素，看看哪个元素在影响它。
如果您不是专家，那么为您提供最佳解决方案。 请在dropdown-menu后添加一个新类，例如：

<ul class="dropdown-menu colorchange">

然后像这样调用CSS：

.colorchange li a:hover{

    background-color: green;

}

它应该工作！ 您也可以在这里使用important信息。

Answer 3

尝试这个

 .dropdown-menu li:hover .dropdown-menu li a{
        color: green;
    }