Question

I’ve got a strange issue with IE7 and IE8 where drop-down menu items jump around when hovered over – some negative margin rules are being applied on hover on the top level menu items which are cascading down to sub-menu items. Basically the drop-down menu is overriding some of the styles from Twitter bootstrap, which is included before the app.css applies custom styles.

This code is the culprit and I can’t seem to override it without losing the styling on the top level items that I need:

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav li.dropdown.open > .dropdown-toggle {
    height: 12px;
    margin-top: -10px;
    padding-top: 10px;
}

Here is a [demo link][1] (only the dropout menu styling is the issue at the moment, I realise the top level items aren’t very legible!)

Answer 1

Just change the rule to this (basically add the descendent selector under .nav):

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav > li.dropdown.open > .dropdown-toggle {
    height: 12px;
    margin-top: -10px;
    padding-top: 10px;
}

i.e.

.navbar .nav li.dropdown.open > .dropdown-toggle {

becomes:

.navbar .nav > li.dropdown.open > .dropdown-toggle {