Drop-down menu

Question

I am trying to change the color of the dropdown menu pointer in the navigation bar. but I could not do it. anyone can help me. is this my html.how changing 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 the following:

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 color of the arrow, use this:

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

UPDATED DEMO

Answer 2

Default css rule for bootstrap 3 for background hover dropdown

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

To change this, you can add your custom css rule, and I recommend that you add your own id or targeting class to the drop-down list, rather than overriding the default value using your own selector so that other dropdows don't get hurt.

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

Hope this helps.

Answer 3

You might want to redefine the CSS structure as shown below.

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

Answer 4

To change the background of the dropdown menu, try

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

just use the browser validation element and you will see the whole structure of the drop-down list and how the boot file will add some classes. You can use this to change the structure to suit your needs.