Как изменить цвет ссылок в выпадающем меню на панели навигации

Моя панель навигации имеет выпадающее меню, которое выглядит так. 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>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
25
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вам нужно пойти дальше с этим. Потому что тот, к которому вам нужно идти, это .dropdown-menu > li > a > li > ul, который, на мой взгляд, слишком тяжелый. Попробуйте добавить это в свой код

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

Я пробовал это, но это не сработало.

Salman Abbas 10.04.2022 06:26
Ответ принят как подходящий

Попробуйте это, если это работает.

ul.dropdown-menu > li > a {color:black !important;}

спасибо, это сработало. есть ли другой способ сделать это без использования !important?

Salman Abbas 10.04.2022 06:37

вы можете попробовать удалить его и посмотреть, работает ли он в вашем коде. вы также можете добавить класс к своей ссылке другим способом, например, a.blacklink {color:black}, а затем добавить класс к своим ссылкам, которые вы хотите.

Crystal 10.04.2022 06:44

это работает только тогда, когда я использую !important в обоих случаях. кстати спасибо за ответ

Salman Abbas 10.04.2022 06:53

другой способ — поместить его в строку, например <a style="color:black"></a>. Я рад, что это сработало для вас. удачного кодирования :)

Crystal 10.04.2022 06:56

Другие вопросы по теме