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://jsfidle.net/zgoewybm/1/

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

编辑：我自己解决了这个问题。对于好奇的人，我在HTML中html" target="_blank">添加了这个...

.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;
}