制作下拉菜单以保持悬停状态

Question

我有一个显示悬停时的下拉菜单。但它在父李之间有一些差距，所以当我尝试将鼠标移动到下拉菜单时它会消失。这里最好的解决方案是什么？谢谢。

https://jsfiddle.net/uz0tw152/

.list1 > li {
  display: inline-block;
  margin-right: 40px;
  vertical-align: top;
}

.list1 > li ul {
  display: none;
  position: absolute;
  margin-top: 30px;
}

.list1 > li:hover ul {
  display: block;
}

<ul class="list1">
  <li>Menu 1
    <ul>
      <li>Submenu 1</li>
      <li>Submenu 2</li>
      <li>Submenu 3</li>
      <li>Submenu 4</li>
    </ul>
  </li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

Answer 1

将下拉菜单中的margin-top更改为padding-top。

.list1 > li {
  display: inline-block;
  margin-right: 40px;
  vertical-align: top;
}

.list1 > li ul {
  display: none;
  position: absolute;
  padding-top: 30px;
}

.list1 > li:hover ul {
  display: block;
}

<ul class="list1">
  <li>Menu 1
    <ul>
      <li>Submenu 1</li>
      <li>Submenu 2</li>
      <li>Submenu 3</li>
      <li>Submenu 4</li>
    </ul>
  </li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>