bootstrap 3导航栏下拉框颜色

Question

我正在使用带有bootstrap 3的平面UI主题.平面UI主题导航栏无法正常工作,并且很多人在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灰色显示.我缺少哪些类来更改下拉子菜单背景颜色,链接颜色等？

谢谢

Answer 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