Bootstrap下拉菜单文本颜色

Question

我第一次使用Twitter的Bootstrap，尝试在下拉菜单折叠后更改文本颜色。我使用this site（<<<---正在使用的CSS链接）来帮助一些CSS，但我似乎找不到正确的代码块来更改正确文本的颜色。当您压缩网页以显示折叠菜单并转到下拉列表时，您将看到蓝色背景转移到下拉菜单项，但字体颜色为黑色，这使得阅读非常困难。我想让这个字体变成白色。

<nav class="navbar navbar-custom" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">ATR Notary</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="~/Order/Index" class="dropdown-toggle"
                   data-toggle="dropdown">Orders <b class="caret"></b></a>
                <ul class="dropdown-menu">                                    
                    <li><a href="~/Order/Index">View Orders</a></li>
                    <li><a href="~/Order/Create">Add Order</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="~/Notary/Index" class="dropdown-toggle"
                   data-toggle="dropdown">Notaries <b class="caret"></b></a>
                <ul class="dropdown-menu">                                   
                    <li><a href="~/Notary/Index">View Notaries</a></li>
                    <li><a href="~/Notary/Create">Add Notary</a></li>
                </ul>
            </li>
        </ul>

        @Html.Partial("_LoginPartial")
    </div><!-- /.navbar-collapse -->

</nav>

- MaylorTaylor

---

你能否发布一个网站链接或者你的CSS和HTML的副本？ - GSaunders

好的，我使用的CSS就是从第二段中链接的页面上直接拉取下来的。我会编辑原帖并加入HTML代码。 - MaylorTaylor

Answer 1

你应该能够使用这个 CSS ..

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

演示: http://www.bootply.com/113750

- Zim

---

这个方法可行，我只需要将它更改为.navbar-custom以适应我的特定CSS即可。 - MaylorTaylor

这里是另一个对我有效的解决Bootstrap下拉菜单悬停背景更改问题的链接，多选下拉菜单悬停效果可以在这里找到。 - Shaiju T

另外，如果您正在使用悬停下拉菜单，请删除“.open”类，它将正常工作。 - Albert MN.

Answer 2

应用简单的 CSS，就可以完成。

看这个例子：

.navbar{height:70px; padding-top:20px; }

将更改导航栏的高度和填充 - 即外部容器

.dropdown-menu{background:rgba(0,0,0,0.5); color:white; }

将更改下拉菜单的背景颜色 - 即下拉链接下的 ul。 我们只需要理解导航栏的结构。

   .dropdown-menu li>a{color:white; }
   .dropdown-menu>li{padding:5px; border-bottom:1px solid white;border-left:1px 
              solid white;border-right:1px solid white }
   .dropdown-menu li>a:hover{background:white; }

- Rajan471

Answer 3

之前的回答基本上说了同样的事情，但他们的语法和注释对我来说有点混乱，可能也会让其他人感到困惑... 首先调用“dropdown-menu”类，然后是该类中的“li” HTML元素，然后是嵌套在“li”元素内部的“a” HTML元素，因此CSS看起来像这样：

.dropdown-menu li a {
    color: white;
}

- wla312