change bootstrap navbar dropdown menu hover color

Question

I try to change hover color of dropdown menu in nav bar. but i coulden't it. any one can plz help me. this is my html.how I change the hover color using css?

<div class="navbar navbar-inverse" id="menu">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li class="dropdown active"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Service <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="registration.html">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
             </li>
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="registration.html">house Plan design</a></li>
                    <li><a href="#">Interior Design</a></li>
                    <li><a href="#">Gardning DEsign</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
             </li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>

Answer 1

Try this:

Remove background-image and use background-color

 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-image:none !important;
 }
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color:red;
 }

DEMO

To Change the Arrow Color use this:

<span class="caret" style="color: red;"></span>

UPDATED DEMO

Answer 2

The default css rule of bootstrap 3 to dropdowns background hover is

.dropdown-menu>li>a:hover {
   color: #262626;
   text-decoration: none;
   background-color: #f5f5f5;
} //somewhat on line 6 or 7

To change that you may want to add your custom css rule and I recommend you to add your own id or class to target to the dropdown rather than to override the default using its own selector so that other dropdows will not be affected.

.your-class>li>a:hover {
   background-color: red !important;
}

Hope it helps.

Answer 3

You might wants to override the CSS of framework like below.

.navbar dropdown li a:hover {
   background-color: #b5b5b5;
}

Answer 4

To change the background of the dropdown menu, try this

nav.navbar ul li > ul {
  background: #2B3E50;
  box-shadow: none;
}

just use the inspect element of the browser and you will see the entire structure of the dropdown and how bootstrap added some classes. you can use that to modify the framework to your needs.