如何更改导航栏切换中下拉菜单中链接的颜色
how to change color of links in dropdown menu in navbar toggle
我的导航栏有一个如下所示的下拉菜单。
当我调整浏览器大小时获得小型设备版本时,它看起来像这样。
我想将下拉菜单(服务)中的链接颜色更改为黑色,但我不知道 CSS 的 class 到 select。
我试过了,但没有成功。
.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>
我认为你需要更进一步。因为你需要去的那个是.dropdown-menu > li > a > li > ul
,在我看来这太重了。尝试将此添加到您的代码中
#dropdown {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
如果可行,试试这个。
ul.dropdown-menu > li > a {color:black !important;}
我的导航栏有一个如下所示的下拉菜单。
我想将下拉菜单(服务)中的链接颜色更改为黑色,但我不知道 CSS 的 class 到 select。 我试过了,但没有成功。
.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>
我认为你需要更进一步。因为你需要去的那个是.dropdown-menu > li > a > li > ul
,在我看来这太重了。尝试将此添加到您的代码中
#dropdown {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
如果可行,试试这个。
ul.dropdown-menu > li > a {color:black !important;}