html - CSS 下拉菜单的父元素在移动到菜单时失去悬停效果

Question

标题很冗长，有点难以理解，但我的想法是我有一个下拉菜单，当产生下拉菜单的主要链接悬停在上面时，它们的背景颜色和文本颜色会改变，菜单就会出现。问题是，当您将光标移动到菜单上以单击刚刚出现的链接时，上面主要链接的悬停效果消失了。菜单保留并工作得很好，但理想情况下，我希望在悬停时生成菜单的链接在菜单打开时保持悬停效果。

这是我正在谈论的代码......

CSS

a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }

.upper-navigation {
  color: #D5D7D5;
  display: inline-block;
  height: 45px;
  width: 160px;
  padding-top: 16px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13pt;
  font-weight: 500;
  letter-spacing: 0.05rem;
  padding-left: 24px;
}
.upper-navigation:hover {
  background-color: #232a2d;
}

.lower-navigation {
  color: #4E6875;
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: 0.01rem;
  margin-left: 24px;
}

.lower-navigation.s {
  color: #D5D7D5;
}

ul {
  padding: 0;
  margin: 0;
}
li {
  display: inline;
  position: relative;
}
ul ul {
  position: absolute;
  display: none;
}
li:hover ul {
  display: block;
  background-color: #232a2d;
  z-index: 10;
  padding: 0px 24px 18px 0px;
  width: 160px;
}

HTML

<ul>
  <li><a href="/" class="upper-navigation">Homepage</a></li>
  <li><a href="/" class="upper-navigation">Community</a>
    <ul>
      <li><a href="/" class="lower-navigation s">First Link</a></li><br>
      <li><a href="/" class="lower-navigation s">Second Link</a></li><br>
      <li><a href="/" class="lower-navigation s">Third Link</a></li>
    </ul>
  </li>
  <li><a href="/" class="upper-navigation">Discover</a>
    <ul>
      <li><a href="/" class="lower-navigation s">First Link</a></li><br>
      <li><a href="/" class="lower-navigation s">Second Link</a></li>
    </ul>
  </li>
</ul>

下面是一小段代码...

https://jsfiddle.net/zgoewybm/1/

理想情况下，在菜单上方时，Ipsum 和 Dolor 链接应保持深色背景和浅蓝色文本颜色。

编辑:我自己解决了这个问题。对于任何好奇的人，我将其添加到 HTML 中......

.upper-navigation:hover, li:hover {
  background-color: #232a2d;
  display: inline-block;
  color: #0FA0CE;
}

Answer 1

我只是将其添加到 HTML 中...

.upper-navigation:hover, li:hover {
  background-color: #232a2d;
  display: inline-block;
  color: #0FA0CE;
}