代码之家  ›  专栏  ›  技术社区  ›  Salman Abbas

如何在导航栏切换中更改下拉菜单中链接的颜色

  •  1
  • Salman Abbas  · 技术社区  · 2 年前

    我的导航栏有一个下拉菜单,看起来像这样。 enter image description here 当我调整浏览器大小以获得小型设备版本时,它看起来是这样的。 enter image description here

    我想将下拉列表(服务)中链接的颜色更改为黑色,但我不知道要为CSS选择哪个类。 我试过了,但没有成功。

    .dropdown-menu {
         display: none;
         position: absolute;
         background-color: #00ff99;
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
         z-index: 1;
    }
    .dropdown-menu > li > a {
         float: none;
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         text-align: left;
    }
    .navbar-toggle .dropdown-menu > li > a{
         color: black;
    }
    
    

    这是我的HTML

    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       </button>
       @Html.ActionLink("E-HealthCare", "About", "Home", new { area = "" }, new { @class = "navbar-brand shadow" })
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
       <li>@Html.ActionLink("Home", "About", "Home")</li>
       @*
       <li>@Html.ActionLink("About", "About", "Home")</li>
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
       <li>@Html.DropDownList("Services","ALL")</li>
       *@
       <li>
          <div class="dropdown">
             <button class="Dropdown-btn btn-block text-left dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
             Services
             <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
             </ul>
          </div>
       </li>
    </ul>
    
    2 回复  |  直到 2 年前
        1
  •  2
  •   Crystal    2 年前

    如果有用的话,试试这个。

    ul.dropdown-menu > li > a {color:black !important;}
        2
  •  0
  •   pshyduc    2 年前

    我觉得你需要更进一步。因为你需要去的是 .dropdown-menu > li > a > li > ul 我觉得这太重了。尝试将这个添加到代码中

    #dropdown {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }