22

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.

1
  • 1
    Also, this isn't a duplicate. I have tried this answer and this one, and nothing works.
    – yuvi
    Feb 18, 2014 at 12:41

1 Answer 1

45

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/

7
  • Almost, only I want the submenu hover to work, not the MyProfile. Notice how I use .dropdown-menu. The weird thing is, using !important doesn't work...
    – yuvi
    Feb 18, 2014 at 12:53
  • Yes! Thank you! That works. Wow, I haven't thought they were doing something so convoluted as using a background image instead of a normal background-color... That's so weird!
    – yuvi
    Feb 18, 2014 at 12:56
  • 2
    For future reference if you're having a hard time identifying the problem with hovering elements, simply use the Chrome dev tools which allow you to inspect elements with pseudo classes attached: i.imgur.com/NzV8E2E.png
    – Etheryte
    Feb 18, 2014 at 13:01
  • I am using the chrome dev tools, but I guess I missed that
    – yuvi
    Feb 18, 2014 at 13:33
  • 1
    @Bemisawa because of this issue
    – yuvi
    Dec 19, 2016 at 22:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.