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
.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With