Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing the background for bootstrap dropdown a on hover

I am using bootstrap's dropdown from a navigation div, and I'd like to change the color of the the sub-menu links on hover. Nothing I'm attempting works, and I can't make sense of it. It's not having any effect even when trying to run things from the chrome console.

I have created a css file where I override the defaults. The background change for normal a tags work, but the hover doesn't. Why is that? I also tried affecting the li and using !important, but none of that is having any effect.

I'm using Bootstrap 3.1.1. Here's my css:

.dropdown-menu > li > a {
    color: white; /* This has an effect */
}

.dropdown-menu > li > a:hover {
    background-color: red; /* This doesn't... why? */
}

And check out this jsfiddle too for a demonstration (for some reason you need to drag the result panel a whole lot to the left before you see the button). Any ideas?

edit

Note I am trying to change the background color for the links in the dropdown, not for the main button which is MyProfile.

like image 910
yuvi Avatar asked Feb 18 '14 12:02

yuvi


1 Answers

Bootstrap defines a background image for the elements to override some clashes in their media queries. Remove the image to use a simple fill color.

You can redefine your hover as follows:

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

http://jsfiddle.net/sW7Dh/4/

like image 135
Etheryte Avatar answered Oct 28 '22 23:10

Etheryte