Question

我的子菜单在悬停时消失。当我将鼠标悬停在它出现的菜单项上时，但是当我尝试转到子菜单项时......它消失了。知道为什么吗？

我试过这样做：

.nav ul li:hover ul {
    display: block !important;
}

但我仍有同样的问题。任何帮助将不胜感激！

HTML：

<div class="nav">
  <ul>
    <li>
      <a href="#">Testing</a>
      <ul>
        <li><a href="#">Testing 1</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS：

.nav ul {
  letter-spacing: 2px;
  margin-top: 10px;
}

.nav ul li {
  display: inline-block;
  border-right: 1px solid #7d7a7a;
}

.nav ul ul li {
  border-right: none;
}

.nav ul li:last-child {
  border-right: none;
}

.nav ul li a {
  display: inline-block;
  color: #000;
  text-decoration: none;
  padding: 0 10px;
  height: 80%;
}

.nav ul li a i {
  color: #000;
}

.nav ul ul li:hover ul {
  display: block;
}

.nav ul li:hover ul {
  display: block !important;
}

.nav ul li ul {
  position: absolute;
  display: none;
  background-color: #333;
  height: auto;
  top: 34px;
  padding: 13px 10px;
}

.nav ul li ul li:hover {
  background-color: #47a3da;
}

JSFiddle demo

Answer 1

由于您的父级li及其下拉菜单项之间有额外的空格，因此下拉ul会丢失.nav ul li ul li:hover的事件。为了使它工作，

只需调整垂直距离b / w parent及其下拉子菜单项

.nav ul li ul {
  position: absolute;
  display: none;
  background-color: #333;
  height: auto;
  top: 18px; /* Works fine on 18px*/
  padding: 13px 10px;
}

<强> JSFiddle

Answer 2

这种情况正在发生，因为下拉列表与按钮之间存在差距。

您需要摆脱任何边距，并将下拉菜单放在按钮下方。

Demo

.nav > ul {
  letter-spacing: 2px;
  margin-top: 10px;
}

.nav ul li ul {
  position: absolute;
  display: none;
  background-color: #333;
  height: auto;
  padding: 13px 10px;
}

子菜单在悬停

2 个答案:

Demo