悬停时下拉菜单消失答案

【问题标题】：Drop-down menu disappears on hover悬停时下拉菜单消失
【发布时间】：2018-04-17 05:09:03
【问题描述】：

我的下拉菜单有问题，当我将鼠标悬停在它上面时它就会消失。对于此事，我将不胜感激。

* {
  margin: 0;
  padding: 0;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* Menu */
header>hide:before {
  display: block;
  content: "";
  height: 30px;
  width: 30px;
  background: black url(burger.gif) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 0px;
  margin: 0px;
}

header>nav {
  display: none;
  position: absolute;
  text-align: left;
  top: 50px;
  left: 0;
  width: 200px;
  height: 193px;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}

header>nav>ul {
  list-style-type: none;  
  margin: 0;
  padding: 0;
}

header>nav>ul>li {
  position: relative;
  float: none;
  bottom: 0;
  right: 0;
  background: url(menu.png) no-repeat top right;
  background-size: contain;
}

header>nav>ul>li>a {
  font-size: 1em; 
  font-weight: bold;
  text-decoration: none;
  color: white;
  margin: 0px 59px 0px 0px;
  display: inline-block;
  line-height: 48px;
  padding: 0px 24px;
  width: 60%;
  white-space: nowrap;
}

header>nav>ul>li>a:hover {
  background-color: rgb(146, 0, 0);
}

header>hide:hover + nav {
  display: block;
}

<!-- Header -->
<header class="clearfix">
<!-- Menu  -->
<hide></hide>
<nav>
  <ul>
    <li>
      <a href="#">123456</a>
    </li>
    <li>
      <a href="#">123456</a>
    </li>
    <li>
      <a href="#">123456</a>
    </li>
    <li>
      <a href="#">123456</a>
    </li>
  </ul>
</nav>

JSFiddle.

【问题讨论】：

标签： html css drop-down-menu hover

【解决方案1】：

关于这个问题的提示，有时要确保顶部 li 项和子列表之间没有间隙，例如，如果您为顶部 li 项指定边距，可能会导致问题，删除边距解决我的问题。

【讨论】：

【解决方案2】：

为防止菜单在您尝试将鼠标悬停在链接项上时隐藏，您需要添加一个带有:hover 的 CSS 规则，以便在您将鼠标悬停在其中一个链接上时使菜单可见。

这可以通过添加以下 CSS 来完成：

header>hide:hover + nav,
header>nav:hover {
        display: block;
 }

注意我添加的header>nav:hover。这样可以确保将鼠标悬停在 nav 元素上时可见。

这里是更新小提琴的链接：http://jsfiddle.net/gmeayqLy/1/

【讨论】：