Бутстрап 3 navbar выпадающий ящик цвет

Я использую плоскую тему пользовательского интерфейса с бутстрапом 3. Плоский пользовательский интерфейс навигации не работает правильно, и многие из них имеют схожие проблемы с ним, которые размещены на github. Поэтому я решил просто использовать стандартную навигационную панель BS3 и написать собственный код (с помощью другого потока stackoverflow), чтобы стиль меню был таким, каким хотелось бы. Я делаю это в LESS как переопределение css.

Проблема заключается в том, что я не могу понять, как изменить следующее.

цвет выпадающего окна
цвет ссылки в раскрывающемся списке
цвет выпадающего списка ссылок

Вот css, который я использую:

/* navbar */
.navbar-default {
   font-size: floor(@component-font-size-base * 1.067); // ~16px
   border-radius: @border-radius-large;
   border: none;
   background-color: @brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover {
    color: @clouds;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  // Changes color of main button that is currently active.
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  //  Changes color of main menu button once clicked.
}
/* caret */
.navbar-default .navbar-nav > li > a .caret {
    border-top-color: @clouds;
    border-bottom-color: @clouds;
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

Это создает правильную цветовую полосу, штриховую связь, эффекты зависания и зависания. Но когда я нажимаю кнопку с подменю, подменю все еще появляется в BS по умолчанию. Какие классы мне не хватает, чтобы изменить выпадающий цвет фона подменю, цвет ссылки и т.д.

Спасибо

Ответ 1

Это CSS, чтобы изменить стиль/цвет меню выпадающего меню.

  .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

Демо: http://bootply.com/93475

Ответ 2

Я также добавил бы это:

.navbar-default .dropdown-menu {
     background-color: #3344ff;
     color:#ffffff;
}

В дополнение к тому, что сказал Скелли в своем ответе:

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
}

Это связано с тем, что последний только меняет фоновый цвет, когда раскрывающийся список открыт, но как только он возвращается назад, фоновый цвет меняется на значение по умолчанию. Вы не можете засвидетельствовать это, просто переключив раскрывающийся список, но если вы задерживаете переход выпадающего списка, например, используя jQuery ниже для зависания, вы можете видеть, что я имею в виду.

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

jsFiddle с приведенным выше CSS Вы можете сравнить выпадающее меню с одним из них. Они оба работают.

jsFiddle без вышеуказанного CSS. Выпадающее меню переключения, похоже, работает, но как только вы наведите указатель мыши и отпустите мышь, он вернется назад.

Ответ 3

Если вы используете FireFox или Chrome, можете ли вы использовать их инструменты для разработчиков, чтобы проверить, что CSS применяется к выпадающему меню?

Например, то, что я сделал бы в Chrome, - это щелкнуть правой кнопкой мыши по фону выпадающего окна и выбрать "Осмотреть элемент". Затем проверьте, что выбран правильный элемент. Затем вы сможете проверить, какие стили CSS применяются к этому элементу на панели справа (у нее есть вкладки для стилей, вычислений, прослушивателей событий, точек останова DOM и свойств в моей версии Chrome 30.0.1599.101 m)

Ответ 4

Я использовал генератор меню BS3 для создания кода CSS, который мне нужен. Было намного проще, чем пытаться выслеживать теги, которые мне нужно было изменить.