在纯css中悬停链接时，如何防止div消失

Question

首先，对我的英语感到抱歉，我要尽量准确地说，这是我的问题：

在我的css中，我创建了一个显示为none的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 {

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