我使用平面UI主题与引导3.平面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灰色显示.我缺少什么类来改变子菜单的背景颜色,链接颜色等？
谢谢
解决方法
这是CSS更改下拉菜单样式/颜色..
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
