设置 Link 的背景颜色和鼠标悬停时的下拉按钮

Question

如果用户将鼠标悬停在下拉按钮中的 link 上，如何为他们悬停的 link 和下拉菜单设置背景？

目前，我有一个下拉菜单，当用户将鼠标悬停在该菜单中的 link 或菜单本身上时，它会更改背景。

以下是当前功能的一些图片：

注意： 由于某些原因，我的图像显示为 links。

如何使主下拉菜单和当前悬停的 link 同时具有背景色？如果悬停其中一个灰色 link，则该灰色和主下拉菜单（红色）也将突出显示。

.control {
  margin: 0 500px;
}

.navadrop {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
}

/* Links inside the dropdown */
.dropdown-content .navadrop {
  color: black;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #EDEDED;
  border-radius: 5px;
}

/* Show the dropdown menu on hover */
.navlidrop:hover .dropdown-content {
  display: block;
}

/**Change the background of the main link**/
.navadrophead:hover {
  background-color: #DDABAC;
  border-radius: 5px;
}

<div class="control">
  <li class="navlidrop"><a class="nava navadrop navadrophead" href=""><b>Dropdown</b></a>
    <div class="dropdown-content">
      <a class="navadrop" href="#"><b>Link in dropdown #1</b></a>
      <a class="navadrop" href="#"><b>Link in dropdown #2</b></a>
      <a class="navadrop" href="#"><b>Link in dropdown #3</b></a>
      <a class="navadrop" href="#"><b>Link in dropdown #4</b></a>
    </div>
  </li>
</div>

Answer 1

当元素悬停但其父元素 (.navlidrop) 悬停时，不要设置 .navadrophead 背景样式。换句话说替换

/**Change the background of the main link**/
.navadrophead:hover{
  background-color: #DDABAC;
  border-radius: 5px;   
}

来自

/**Change the background of the main link**/
.navlidrop:hover .navadrophead{
  background-color: #DDABAC;
  border-radius: 5px;   
}

设置 Link 的背景颜色和鼠标悬停时的下拉按钮

Setting Background Color of Link and Drop Down Button on Mouse Over

html

css

navigation

menu

dropdown