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;
    }

设计引导下拉菜单

3 个答案: