我的下拉菜单在悬停时不会保持打开状态

Question

我遇到了一个问题，当我将光标悬停在下拉菜单上时，它不会保持打开状态。它有时会保持打开一段时间然后消失。我一直在努力寻找解决方案，但我无法真正说出问题所在。谁能帮我？我是 CSS 和 HTML 的新手...

.arrow {
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-position: 100px;
}

.menu-area ul {
  text-transform: uppercase;
  list-style: none;
  width: 145px;
  margin-left: 10px;
  padding: 0px;
  position: absolute;
  display: block;
  box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}

.menu-area ul ul {
  margin-left: 1px;
  position: absolute;
  display: none;
  left: 100%;
  top: 0px;
}

.menu-area ul li {
  border-bottom: 1px solid white;
  background: MediumVioletRed;
  position: relative;
  display: block;
  margin-bottom: 0px;
}

.menu-area ul li a {
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
}

.menu-area ul li:hover {
  background-color: hotpink;
}

.menu-area ul li:hover>ul {
  display: block;
}

<div class="menu-area">
  <ul>
    <li><a href="home_guru.php">Home</a></li>
    <li><a class="arrow" href="#">Soalan</a>
      <ul>
        <li><a href="soalan_insert2.php">Add</a></li>
        <li><a href="soalan_update2.php">Update</a></li>
        <li><a href="soalan_delete2.php">Delete</a></li>
        <li><a href="soalan_senarai.php">List</a></li>
        <li><a class="arrow" href="#">Topic</a>
          <ul>
            <li><a href="topik_insert2.php">Add</a></li>
            <li><a href="topik_update2.php">Update</a></li>
            <li><a href="topik_delete2.php">Delete</a></li>
            <li><a href="topik_senarai.php">List</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您在.menu-area ul ul 上添加margin-left: 1px;，这会在主ul 和子菜单ul 之间产生1px 的差距。如果你达到了那个差距（这很难，因为它只有 1px 但仍然可能），子菜单就会关闭。

删除边距，使 ul 的“接触”彼此没有间隙，以便在菜单和子菜单之间安全过渡（您可以添加与填充相同的间距，以便保持 1px 的间隙）。除了这个 1px 的差距，一切都运行顺利。

一般而言，我建议添加https://github.com/kamens/jQuery-menu-aim tho，以便在尝试访问最后一个子菜单项时菜单不会关闭（您很可能会移出 main-ul，这会使菜单立即关闭）。

Answer 2

悬停样式未应用，因为与子元素有 1px 的间隙。您可以删除该边距并在子 ul 上设置透明边框

.arrow {
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-position: 100px;
}

.menu-area ul {
  text-transform: uppercase;
  list-style: none;
  width: 145px;
  margin-left: 10px;
  padding: 0px;
  position: absolute;
  display: block;
  box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}

.menu-area ul ul {
  margin-left: 0;
  border-left: 1px solid transparent;
  position: absolute;
  display: none;
  left: 100%;
  top: 0px;
}

.menu-area ul li {
  border-bottom: 1px solid white;
  background: MediumVioletRed;
  position: relative;
  display: block;
  margin-bottom: 0px;
}

.menu-area ul li a {
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
}

.menu-area ul li:hover {
  background-color: hotpink;
}

.menu-area ul li:hover>ul,
.menu-area ul li>ul:hover {
  display: block;
}

<div class="menu-area">
  <ul>
    <li><a href="home_guru.php">Home</a></li>
    <li><a class="arrow" href="#">Soalan</a>
      <ul>
        <li><a href="soalan_insert2.php">Add</a></li>
        <li><a href="soalan_update2.php">Update</a></li>
        <li><a href="soalan_delete2.php">Delete</a></li>
        <li><a href="soalan_senarai.php">List</a></li>
        <li><a class="arrow" href="#">Topic</a>
          <ul>
            <li><a href="topik_insert2.php">Add</a></li>
            <li><a href="topik_update2.php">Update</a></li>
            <li><a href="topik_delete2.php">Delete</a></li>
            <li><a href="topik_senarai.php">List</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>