Html 绝对位置的保证金<；ul>；菜单

我有一个菜单，上面的边距为12像素，左边的边距为12像素，但当光标位于该空间（边距）之间时，菜单被隐藏。如果我去掉position:absolute，我可以解决这个问题，但我需要它。我怎样才能解决这个问题

HTML

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Food</a>
<ul>
  <li><a href="#">Chilean food</a></li>
  <li><a href="#">Chinese food</a></li>
  <li><a href="#">Mexican food</a>
    <ul>
      <li><a href="#">Nachos</a></li>
      <li><a href="#">Quesadillas</a></li>
        <li><a href="#">Tacos</a></li>
    </ul>
  </li>
</ul>

JSFiddle：

---

谢谢

将

ulli-ul

中的

页边距顶部

更改为

填充顶部

---

将

ulli-ul

中的

页边距顶部

更改为

填充顶部

---

为什么不删除第一个子菜单的页边距顶部，而删除第二个子菜单的页边距左侧？如果删除了它们，效果很好。为什么不删除第一个子菜单的页边空白顶部和第二个子菜单的页边空白左侧？如果将其移除，则可以正常工作

ul {
    margin: 0;
    padding: 0;
    list-style: none;
  display: flex;
}

ul li {
    position: relative;
}

ul li ul {
    display: none;
  position: absolute;
  margin-top: 4px;
}

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

ul li a {
    text-decoration: none;
  padding: 12px;
  display: block;
  background: black;
  color: white;
  white-space: nowrap;
}

ul li ul li ul {
    top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 4px;
}