当您将 link 悬停在纯 css 中时，如何防止 div 消失

Question

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

在我的 css 中，我创建了一个显示为 none 的 div，当我将鼠标悬停在导航中的 link 上时，我用显示块更改了显示是一个简单的子导航模式。但这是我的问题，一旦我悬停我的 link 当我离开它时，我的子菜单会自动消失，所以即使我不再悬停触发器，我如何将我的子菜单保持在显示块中其中纯 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/

当您将 link 悬停在纯 css 中时，如何防止 div 消失

How to prevent a div from disappearing when you hover a link in pure css

html

css

hover

submenu

drop-down-menu