Question

这里引导newb。无法找到正确的选择器来为菜单中的链接着色。我试过.nav a：link，a：悬停但是超链接和悬停颜色保持默认的蓝色/灰色。

<div class="navbar navbar-static-top">
    <div class="containerNav">
        <div class="navbar-header"> <a href="#" class="navbar-brand">Test</a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">  <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">Blog</a>
                </li>
                <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social media <b class = "caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter</a>
                        </li>
                        <li><a href="#">Facebook</a>
                        </li>
                        <li><a href="#">Google+</a>
                        </li>
                        <li><a href="#">Instagram</a>
                        </li>
                    </ul>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#contact" data-toggle="modal">Contact</a>
                    </li>
            </ul>
        </div>
        <!-- end container -->
    </div>
</div>
<!-- end nav bar -->

使用bootstrap 3.2。 http://jsfiddle.net/nwjob2e0/。（在JS小提琴中，我的图标栏隐藏在它所说的'结果'的位置，所以如果你按下该列表应该扩展，你可以看到我的意思。 http://jsfiddle.net/nwjob2e0/#&togetherjs=ioVBLnT3mA - 合作

Answer 1

试试这个：

.navbar .navbar-nav > li > a {
  color: #999;
}

对于Active，Hover，Focus：

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #000;
}

的更新

要修改下拉菜单（例如您的示例中的社交媒体菜单）：

.navbar .navbar-nav .open .dropdown-menu { background-color: green; } .navbar .navbar-nav .open .dropdown-menu > li > a:hover, .navbar .navbar-nav .open .dropdown-menu > li > a:focus { background-color: red; }

<强> Check JSFiddle Demo

<强> UPDATE2：

您也可以使用 This Online Tool 轻松生成Bootstrap NavBar。

CSS Selector Bootstrap导航栏菜单链接

1 个答案: