html - 将鼠标悬停在子菜单上时，如何使导航菜单链接颜色仍然悬停？

Question

我试图将导航菜单链接保持悬停，而我将鼠标悬停在子菜单上。我已经搜索了其他方法来解决此问题，但大多数方法都使用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;
}

希望这行之有效或有所帮助!