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

Question

Я только начинаю изучать HTML & CSS и начал строить простой веб-сайт, чтобы учиться на лету.

Я пытаюсь создать раскрывающееся меню, которое открывается, когда пользователь наводится на ссылку (dropbtn в моем коде). Я хочу, чтобы цвет фона и текста кнопки изменялся, когда раскрывающееся меню открыто (когда пользователь наводил курсор на кнопку или любую из раскрывающихся меню). Для справки вы можете посмотреть http://www.cibc.ca. Их navbar - темно-бордовый/красный, но как только пользователь наводит курсор на кнопку, цвет кнопки переключается на серый (в соответствии с выпадающим меню), а цвет текста меняется на темно-бордовый. Цвета остаются неизменными, когда пользователь переходит к раскрывающимся спискам, и возвращается только после того, как курсор полностью выйдет из выпадающего меню.

До сих пор мне удалось создать меню, которое открывается, и цвет фона и текста кнопки меняется, когда пользователь наводил курсор на кнопку. Однако, когда пользователь перемещает курсор от кнопки и в одну из раскрывающихся опций, цвет текста кнопки возвращается к исходному призрачному свету, и поэтому невозможно увидеть текст. Я ищу способы изменить цвет, пока выпадающее меню не будет закрыто.

Это мой первый пост в stackoverflow, так что простите меня за любые проблемы с сообщением.

EDIT: добавлена ​​эта строка кода, которую я нашел, чтобы найти по другому вопросу. К сожалению, я не знаю, почему это работает, поэтому объяснение будет оценено.

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{color:white;} 

HTML:

<div> 
<ul id = "menu"> 
    <li><a class = "active" style = "color:dodgerblue" href = "http://www.google.ca">Home</a></li> 
    <li><a href = "website1.html">Projects</a></li> 
    <li><a href = "http://www.twitter.com">Community Involvement</a></li> 

    <li class = "dropdown">  
     <a class = "dropbtn" href = "#">Social Media</a> 
     <div class = "dropdown-content"> 
      <a href = "http://www.facebook.com">Facebook</a> 
      <a href = "http://www.twitter.com">Twitter</a> 
      <a href = "http://www.instagram.com">Instagram</a></div> 
    </li> 

    <li><a href = "http://www.twitter.com">Join Our Team</a></li> 
    <li><a href = "http://www.twitter.com">FAQ</a></li> 
    <li><a href = "http://www.twitter.com">About Us</a></li> 
    <li><a href = "http://www.twitter.com">Contact Us</a></li> 
</ul> 

CSS:

ul#menu li.dropdown .dropbtn{ 
     display:inline-block; 
     color:ghostwhite; 
     text-decoration:none; 
     text-align:center; 
     padding:14px 16px; 
    } 

ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{ 
     background-color:ghostwhite; 
     color:dodgerblue; 
     } 
     .active{ 
      background-color:ivory; 
     } 

ul#menu li.dropdown{ 
     display:inline-block; 
     } 
ul#menu .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: ghostwhite; 
     min-width: 160px; 
    } 
ul#menu .dropdown-content a{ 
     color:dodgerblue; 
     padding: 12px 16px; 
     text-decoration:none; 
     display:block; 
     text-align:left; 
    } 
ul#menu .dropdown .dropdown-content a:hover{ 
     background-color: skyblue; 

    } 
ul#menu .dropdown:hover .dropdown-content { 
     display: block; 
    } 

Answer 1

.dropdown .dropbtn { 
 
    display: inline-block; 
 
    color: ghostwhite; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: ghostwhite; 
 
    color: dodgerblue; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropdown-content a { 
 
    background-color: skyblue; 
 
    background-color: ghostwhite; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: ghostwhite; 
 
    min-width: 160px; 
 
} 
 

 
.dropdown-content a { 
 
    color: dodgerblue; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
}

<div> 
 
    <ul id="menu"> 
 
    <li><a class="active" style="color:dodgerblue" href="http://www.google.ca">Home</a> 
 
    </li> 
 
    <li><a href="website1.html">Projects</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">Community Involvement</a> 
 
    </li> 
 

 
    <li class="dropdown"> 
 
     <a class="dropbtn" href="#">Social Media</a> 
 
     <div class="dropdown-content"> 
 
     <a href="http://www.facebook.com">Facebook</a> 
 
     <a href="http://www.twitter.com">Twitter</a> 
 
     <a href="http://www.instagram.com">Instagram</a> 
 
     </div> 
 
    </li> 
 

 
    <li><a href="http://www.twitter.com">Join Our Team</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">FAQ</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">About Us</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</div>

key - ваш эффект зависания должен основываться на «.dropdown», потому что это контейнер для всех детей, на которые вы хотите иметь одинаковый эффект. Я немного изменил css и удалил ненужную селекторную специфичность.

Answer 2

Просто добавьте! Важно для блока CSS ниже, чтобы решить вашу проблему. Важное замедление увеличивает нагрузку на этот особый стиль, когда он активен.

ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{ 
    background-color:ghostwhite; 
    color:dodgerblue!important; /* Add !important here */ 
} 

Однако, это не было бы необходимо, если ваши стили в правильном порядке и, как orangeh0g указано, что они должны иметь правильные селекторы, а также. CSS скомпилирован/прочитан как нисходящий из верхней части документа, а это означает, что если стиль добавлен в верхней части таблицы стилей, все это может переопределить его, если вы решите это сделать.