将链接悬停在纯 CSS 中时如何防止 div 消失

Question

首先对不起我的英语我会尽量准确，这是我的问题：

在我的 css 中，我创建了一个不显示的 div，当我将鼠标悬停在导航中的链接上时，我用显示块更改了显示，这是一个简单的子导航模式。但这是我的问题，一旦我将链接悬停在我离开它时，我的子菜单会自动消失，所以即使我不再悬停触发器，我如何将子菜单保持在显示块中并且所有这些都是纯粹的css（对我来说是一个练习）：

这是我在 github 上的仓库：https://github.com/MehdiAlouafi/Int-gration-Briefing-2

Answer 1

我认为你犯了几个错误。

/* First of all it's better to have your list-item relative. */
nav ul > li {
  position:relative;
}

/* Then your .on-hover can have simpler top and left coordinates. */ 
.on-hover {
  height: 150px;
  background-color: rgb(243,243,241);
  width: 165px;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  border-bottom: 1px solid rgba(96, 96, 96, 0.2);
  z-index: -1;
}

/* You want the hovering to be over the entire li.*/
nav ul > li:hover .on-hover {
  display: block;
}

你有这样的悬停工作。这意味着当您将 #test 作为锚点(<a>) 元素时，它会停止悬停

#test:hover + .on-hover {

工作 jsfiddle：https://jsfiddle.net/3su9jppc/1/