styling a bootstrap dropdown menu

Question

I'm not sure why my CSS is not hitting my HTML and styling it correctly.

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

The class dropdown-menu should be hit and then when you hover over the li 's inside it. I have tried adding an id as dropdown menu and changing the CSS to #dropdown-menu but it made no difference.
Also, is there an easy way to find out exactly how to hit the appropriate element as I find this is a frequent problem?

Answer 1

Ok here we go,

here is the working solution of your problem,

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

i have just edited your code http://jsfiddle.net/bf1cyptm/1/

:)

Answer 2

Try adding !important in CSS like:

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

If it does not work it could possibly be some other CSS code that is not letting it happen. So the solution to it is to do an inspect element and see which element is affecting it.
If you are not expert in than a best solution for you. Please add a new class just after dropdown-menu like:

<ul class="dropdown-menu colorchange">

and call CSS by it like:

.colorchange li a:hover{

    background-color: green;

}

It should work! You can use important here as well.

Answer 3

Try this

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