Ändern des Hintergrunds für bootstrap dropdown a bei Hover

Question

Ich benutze Bootstrap Dropdown aus einem Navigations-Div, und ich möchte die Farbe der Untermenü- Links bei Hover ändern. Nichts, was ich versuche, funktioniert, und ich kann keinen Sinn daraus machen. Es hat keine Auswirkungen, selbst wenn Sie versuchen, Dinge von der Chrome-Konsole aus auszuführen.

Ich habe eine CSS-Datei erstellt, wo ich die Standardeinstellungen überschreiben. Die Hintergrundänderung für normale a Tags funktioniert, aber der Hover funktioniert nicht. Warum das? Ich habe auch versucht, die li und die Verwendung !important zu beeinflussen, aber nichts davon hat irgendeine Wirkung.

Ich benutze Bootstrap 3.1.1. Hier ist meine CSS:

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

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

Und lesen Sie in diesem jsfiddle auch für eine Demonstration (aus irgendeinem Grund müssen Sie das Ergebnis Panel eine ganze Menge nach links ziehen, bevor Sie auf die Schaltfläche sehen). Irgendwelche Ideen?

bearbeiten

Hinweis Ich versuche, die Hintergrundfarbe für die Links in die Drop-down zu ändern, nicht für die Haupttaste, die MyProfile ist.

Answer 1

Bootstrap definiert ein Hintergrundbild für die Elemente, entfernen Sie es, um eine einfache Füllfarbe zu verwenden. neu definieren
einfach Ihr schweben wie folgt:

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

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