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

移动到菜单时，CSS下拉菜单的父元素丢失悬停效果

1 个答案: