从div悬停到div时，jQuery Dropdown保持关闭状态

Question

我从两个不同的div下拉菜单。一种是触发器，另一种是子菜单。如果鼠标从触发器悬停到子菜单，则子菜单关闭。即使鼠标在两个div之间切换，如何保持打开状态？

而且我也无法将下拉菜单中的子菜单容器移动。它们需要是两个单独的div。

$('.dropdown-trigger,.submenu-container').hover(
  function(){$('.submenu-container').css('display', 'block')},
  function(){$('.submenu-container').css('display', 'none')},
);

非常感谢您！

Answer 1

您可能不需要jquery。你可以通过CSS做。您可以在jquery中执行的类似方法

.dropdown {
  max-width: 200px;
  list-style: none;
  padding: 10px;
  position: relative;
}
.item {
  display: none;
  padding: 10px 20px;
  border: 1px solid #000;
}
.item.default {
  display: flex;
  justify-content: space-between;
}
.dropdown:hover .item {
  display: block;
}
.dropdown:hover .item.default {
  display: flex;
}

<ul class="dropdown">
      <li class="item default">Select <span>V</span></li>
      <li class="item">1</li>
      <li class="item">1</li>
      <li class="item">1</li>
      <li class="item">1</li>
    </ul>