CODEWITHSUNDEEP
csstwitter-bootstrap
yuvi
yuvi

Reputation: 18447

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.

Upvotes: 23

Views: 53207

Answers (1)

Etheryte
Etheryte

Reputation: 25328

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/

Upvotes: 46

Related Questions