html - 悬停时下拉菜单消失

Question

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

* {
  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.

Answer 1

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