当我悬停在子菜单上时，如何让导航菜单链接颜色仍然悬停？

Question

我试图让导航菜单链接在我悬停在子菜单上时保持悬停。我已经寻找其他方法来解决这个问题，但大多数都使用 javascript，但我不知道如何使用 javascript

我希望它像这样显示

https://ibb.co/nfXrNJg

但正如您在我所做的事情上看到的那样，当我将鼠标悬停在子菜单上时，我无法让导航菜单保持悬停。

* {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  text-decoration: none;
}

body {
  background-color: #3f464a;
}

#nav {
  background-color: #13191c;
  height: 71px;
  position: fixed;
  width: 100%;
}

#github,
#enterprise,
#explore,
#marketplace,
#pricing {
  top: 27px;
}

#logo {
  top: 18px;
  left: 48px
}

#github {
  left: 125px;
}

#enterprise {
  left: 230px;
}

#explore {
  left: 320px;
}

#marketplace {
  left: 405px;
}

#pricing {
  left: 505px;
}

img {
  width: 35px;
  height: 35px;
}

div li a {
  color: white;
}

.nav-menu {
  text-align: center;
  position: absolute;
}

.nav-menu a {
  position: inherit;
  display: block;
  width: 100px;
  padding-bottom: 10px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.nav-menu a:hover {
  color: gray;
  transition: 0.3s ease;
}

.submenu1 {
  position: absolute;
  left: 0px;
  top: 35px;
  display: none;
  background-color: white;
  width: 250px;
  height: 360px;
  padding: 25px 20px 20px 20px;
}

.submenu1 a {
  display: block;
  color: white;
  font-size: 14px;
  text-align: left;
  width: 200px;
}

.submenu1 li a {
  display: none;
}

.gray {
  padding-bottom: 0px;
}

.submenu1x a {
  color: black;
  font-weight: bold;
  font-size: 14px;
}

.gray a {
  font-size: 14px;
  color: gray;
  font-weight: normal;
  padding-bottom: 5px;
}

.submenu1 li a:hover {
  color: blue;
  font-weight: bold;
  transition: 0.1s ease;
}

.nav-menu:hover .submenu1 {
  display: block;
}

.nav-menu:hover .submenu1 li a {
  display: block;
}

<div id="nav">
  <li id="logo" class="nav-menu">
    <a href="#"><img src="github-logo.png"></a>
  </li>
  <li id="github" class="nav-menu"><a href="#">Why GitHub?
			<ul class="submenu1">
				<li class="submenu1x"><a href="#">Features</a></li>
  <li class="gray"><a href="#">Code review</a></li>
  <li class="gray"><a href="#">Project management</a></li>
  <li class="gray"><a href="#">Integrations</a></li>
  <li class="gray"><a href="#">Actions</a></li>
  <li class="gray"><a href="#">Package registry</a></li>
  <li class="gray"><a href="#">Team management</a></li>
  <li class="gray"><a href="#">Social coding</a></li>
  <li class="gray"><a href="#">Documentation</a></li>
  <li class="gray"><a href="#">Code hosting</a></li>
  <br>
  <li class="submenu1x"><a href="#">Customer Stories</a></li>
  <li class="submenu1x"><a href="#">Security</a></li>
  </ul>
  </a>
  </li>
  <li id="explore" class="nav-menu"><a href="#">Explore
			<ul class="submenu1">
				<li class="submenu1x"><a href="#">Explore Github</a></li>
  <li class="gray"><a href="#">Learn & Contribute</a></li>
  <li class="gray"><a href="#">Topics</a></li>
  <li class="gray"><a href="#">Collections</a></li>
  <li class="gray"><a href="#">Trending</a></li>
  <li class="gray"><a href="#">Learning lab</a></li>
  <li class="gray"><a href="#">Open source guides</a></li>
  <br>
  <li class="gray"><a href="#">Connect with others</a></li>
  <li class="gray"><a href="#">Events</a></li>
  <li class="gray"><a href="#">Community Forum</a></li>
  <li class="gray"><a href="#">GitHub Education</a></li>
  </ul>
  </a>
  </li>

</div>

Answer 1

修订版

最好的，据我所知（这是有限的），最好的方法是将下拉菜单和链接放在一个容器内，可能是一个 div，用唯一的 ID 或类来指定它。

/* Default navlink color */
.navlink a {
  color: black;
}
/* Hovered navlink color */
.navlink a:hover, .navlink-and-dropdown:hover {
  color: red;
}
/* Default drop down color (if not specific enough, add an ID) */
.navlink-and-dropdown .dropdown .dropdown-item {
  color: blue;
}
/* Hovered drop down item (shouldn’t need an ID unless included in the selector above) */
.navlink-and-dropdown .dropdown .dropdown-item:hover {
  color: yellow;
}

希望这有效或有帮助！

Answer 2

根据您对 Nathaniel 回答的评论，我假设您希望 li.nav-menu 在其下拉菜单被悬停时保持悬停状态。

感谢您的标记，li.nav-menu 的宽度和高度扩展到下拉菜单。因此，下面的额外选择器将起作用。希望这会有所帮助。

.nav-menu:hover > a, /* affects only the <a> that is the direct child of the root li */
.nav-menu a:hover {
    color: gray;
    transition: 0.3s ease;
}

片段：

* {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  text-decoration: none;
}

body {
  background-color: #3f464a;
}

#nav {
  background-color: #13191c;
  height: 71px;
  position: fixed;
  width: 100%;
}

#github,
#enterprise,
#explore,
#marketplace,
#pricing {
  top: 27px;
}

#logo {
  top: 18px;
  left: 48px
}

#github {
  left: 125px;
}

#enterprise {
  left: 230px;
}

#explore {
  left: 320px;
}

#marketplace {
  left: 405px;
}

#pricing {
  left: 505px;
}

img {
  width: 35px;
  height: 35px;
}

div li a {
  color: white;
}

.nav-menu {
  text-align: center;
  position: absolute;
}

.nav-menu a {
  position: inherit;
  display: block;
  width: 100px;
  padding-bottom: 10px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* add the new selector */
.nav-menu:hover > a,
.nav-menu a:hover {
  color: gray;
  transition: 0.3s ease;
}

.submenu1 {
  position: absolute;
  left: 0px;
  top: 35px;
  display: none;
  background-color: white;
  width: 250px;
  height: 360px;
  padding: 25px 20px 20px 20px;
}

.submenu1 a {
  display: block;
  color: white;
  font-size: 14px;
  text-align: left;
  width: 200px;
}

.submenu1 li a {
  display: none;
}

.gray {
  padding-bottom: 0px;
}

.submenu1x a {
  color: black;
  font-weight: bold;
  font-size: 14px;
}

.gray a {
  font-size: 14px;
  color: gray;
  font-weight: normal;
  padding-bottom: 5px;
}

.submenu1 li a:hover {
  color: blue;
  font-weight: bold;
  transition: 0.1s ease;
}

.nav-menu:hover .submenu1 {
  display: block;
}

.nav-menu:hover .submenu1 li a {
  display: block;
}

<div id="nav">
  <li id="logo" class="nav-menu">
    <a href="#"><img src="github-logo.png"></a>
  </li>
  <li id="github" class="nav-menu"><a href="#">Why GitHub?
			<ul class="submenu1">
				<li class="submenu1x"><a href="#">Features</a></li>
  <li class="gray"><a href="#">Code review</a></li>
  <li class="gray"><a href="#">Project management</a></li>
  <li class="gray"><a href="#">Integrations</a></li>
  <li class="gray"><a href="#">Actions</a></li>
  <li class="gray"><a href="#">Package registry</a></li>
  <li class="gray"><a href="#">Team management</a></li>
  <li class="gray"><a href="#">Social coding</a></li>
  <li class="gray"><a href="#">Documentation</a></li>
  <li class="gray"><a href="#">Code hosting</a></li>
  <br>
  <li class="submenu1x"><a href="#">Customer Stories</a></li>
  <li class="submenu1x"><a href="#">Security</a></li>
  </ul>
  </a>
  </li>
  <li id="explore" class="nav-menu"><a href="#">Explore
			<ul class="submenu1">
				<li class="submenu1x"><a href="#">Explore Github</a></li>
  <li class="gray"><a href="#">Learn & Contribute</a></li>
  <li class="gray"><a href="#">Topics</a></li>
  <li class="gray"><a href="#">Collections</a></li>
  <li class="gray"><a href="#">Trending</a></li>
  <li class="gray"><a href="#">Learning lab</a></li>
  <li class="gray"><a href="#">Open source guides</a></li>
  <br>
  <li class="gray"><a href="#">Connect with others</a></li>
  <li class="gray"><a href="#">Events</a></li>
  <li class="gray"><a href="#">Community Forum</a></li>
  <li class="gray"><a href="#">GitHub Education</a></li>
  </ul>
  </a>
  </li>

</div>

Answer 3

将探索文本放入具有唯一 ID 的 <span id="colored"> Explore </span>，当用户将鼠标悬停在 .nav-menu 上时，突出显示颜色。就像这样.nav-menu:hover #colored {}。

    * {
      padding: 0px;
      margin: 0px;
      list-style-type: none;
      text-decoration: none;
    }

    body {
      background-color: #3f464a;
    }

    #nav {
      background-color: #13191c;
      height: 71px;
      position: fixed;
      width: 100%;
    }

    #github,
    #enterprise,
    #explore,
    #marketplace,
    #pricing {
      top: 27px;
    }

    #logo {
      top: 18px;
      left: 48px
    }

    #github {
      left: 125px;
    }

    #enterprise {
      left: 230px;
    }

    #explore {
      left: 320px;
    }

    #marketplace {
      left: 405px;
    }

    #pricing {
      left: 505px;
    }

    img {
      width: 35px;
      height: 35px;
    }

    div li a {
      color: white;
    }

    .nav-menu {
      text-align: center;
      position: absolute;
    }

    .nav-menu a {
      position: inherit;
      display: block;
      width: 100px;
      padding-bottom: 10px;
      font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    .nav-menu a:hover, .nav-menu:hover #colored {
      color: gray;
      transition: 0.3s ease;
    }

    .submenu1 {
      position: absolute;
      left: 0px;
      top: 20px;
      display: none;
      background-color: white;
      width: 250px;
      height: 360px;
      padding: 25px 20px 20px 20px;
    }

    .submenu1 a {
      display: block;
      color: white;
      font-size: 14px;
      text-align: left;
      width: 200px;
    }

    .submenu1 li a {
      display: none;
    }

    .gray {
      padding-bottom: 0px;
    }
    
    .submenu1x a {
      color: black;
      font-weight: bold;
      font-size: 14px;
    }

    .gray a {
      font-size: 14px;
      color: gray;
      font-weight: normal;
      padding-bottom: 5px;
    }

    .submenu1 li a:hover {
      color: blue;
      font-weight: bold;
      transition: 0.1s ease;
    }

    .nav-menu:hover .submenu1 {
      display: block;
    }

    .nav-menu:hover .submenu1 li a {
      display: block;
    }

编码愉快！