html - 下拉菜单和子菜单之间的差距

Question

我希望菜单子(monad)菜单在菜单下方显示 10 个像素，我可以使用 ul 上的 margin-top 实现这一点，但随后我无法将鼠标向下移动到子菜单，因为存在间隙。有些帖子与此非常相似，但我无法从中提取答案。喜欢这个

Space between menu and drop down menu

deepMenu {
  background: black !important;
  margin-left: 100px !important;
  position: absolute !important;
}
.lmao li ul {
  display: none;
  position: absolute;
  border-top: 5px solid black;
  margin-top: 18px;
}
.lmao li ul li {
  display: none;
  border-top: 0.1px solid #F2F2F2;
  padding: 10px 40px 10px 10px;
  margin: 0;
  position: relative;
  z-index: 9999999;
  background: white;
  font-size: 8pt;
  line-height: 24px;
  text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
  display: block;
}

<ul class="lmao">
  <li class="point1"><a href="index.html">home</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2 long lel</a></li>
      <li><a href="#">Sub Menu 3 really bare long mad</a></li>
      <li><a href="#">Sub Menu 4 dvg</a></li>
    </ul>

    <li class="point"><a href="index.html">features</a>
      <ul>
        <li><a href="#">sdfgsdfgsdfgsdfgsdfgsdfg</a></li>
        <li><a href="#">sdfg</a></li>
        <li><a href="#">sdfgsdfgsdfgsdfg</a></li>
        <li><a href="#">sdfgsdfgsdfgsdfgsdfg</a></li>
      </ul>

      <li class="point layout"><a href="#">Layouts</a>
        <ul>
          <li><a href="#">sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</a></li>
          <li><a href="#">sfdgsdfgsdfgl</a></li>
          <li><a href="#">dfsgsdfgsdfgsdfgsdfgsdfgsdfg</a></li>
          <li class="arrow"><a href="#">sfgsdfg</a>
            <ul class="deepMenu">
              <li><a href="#">Deep Menu 1</a>
                <ul>
                  <li><a href="#">Sub Deep 1</a></li>
                  <li><a href="#">Sub Deep 2</a></li>
                  <li><a href="#">Sub Deep 3</a></li>
                  <li><a href="#">Sub Deep 4</a></li>
                </ul>
              </li>
              <li><a href="#">Deep Menu 2</a></li>
            </ul>
          </li>
        </ul>
      </li>

      <li class="point"><a href="index.html">pages</a></li>
      <li class="point"><a href="index.html">light version</a></li>
</ul>

Answer 1

更新:

既然您给出了引用，悬停菜单实际上离 li 本身并不远，而是位于它的正下方。在示例站点上， li 的高度大于其中的文本，并且具有 position: relative;在上面。

下拉列表绝对位于这个更大的 <li> 的正下方带有 top: 100%; 的元素这样它就远离触发下拉菜单的文本。

使用更新的解决方案检查更新的 Snippet bellow。

---

边距不是“可悬停的”，因此不会触发悬停选择器。在“悬停”时保持距离的一种方法是使用 padding而不是边距。

所以你可以改变你的.lmao li ul ，虽然我不建议将样式添加到标签作为 CSS 最佳实践，但我通常采用 CSS 命名约定，例如 BEM、SMACSS 等。

/* Reset the ul style */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

deepMenu {
  background: black !important;
  margin-left: 100px !important;
  position: absolute !important;
}

.lmao {
  width: 100%;
  text-align: center;
}

.lmao li {
  display: inline-block;
  background-color: white;
  padding: 15px;
  position: relative;
  padding: 20px;
}

.lmao li a {
  text-decoration: none;
  color: black;
}

.lmao li a:hover {
  text-decoration: none;
  color: #f38763;
}

.lmao li ul {
  display: none;
  position: absolute;
  border-top: 5px solid black;
  top: 100%;
  min-width: 200px;
}

.lmao li ul li {
  display: none;
  border-top: 0.1px solid #F2F2F2;
  padding: 10px 40px 10px 10px;
  margin: 0;
  position: relative;
  z-index: 9999999;
  background: white;
  font-size: 8pt;
  line-height: 24px;
  text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
  display: block;
}

<ul class="lmao">
  <li class="point1"><a href="index.html">home</a>
    <ul>
      <li><a href="#">Sub Menu 1</a>
      </li>
      <li><a href="#">Sub Menu 2 long lel</a>
      </li>
      <li><a href="#">Sub Menu 3 really bare long mad</a>
      </li>
      <li><a href="#">Sub Menu 4 dvg</a>
      </li>
    </ul>

    <li class="point"><a href="index.html">features</a>
      <ul>
        <li><a href="#">sdfgsdfgsdfgsdfgsdfgsdfg</a>
        </li>
        <li><a href="#">sdfg</a>
        </li>
        <li><a href="#">sdfgsdfgsdfgsdfg</a>
        </li>
        <li><a href="#">sdfgsdfgsdfgsdfgsdfg</a>
        </li>
      </ul>

      <li class="point layout"><a href="#">Layouts</a>
        <ul>
          <li><a href="#">sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</a>
          </li>
          <li><a href="#">sfdgsdfgsdfgl</a>
          </li>
          <li><a href="#">dfsgsdfgsdfgsdfgsdfgsdfgsdfg</a>
          </li>
          <li class="arrow"><a href="#">sfgsdfg</a>
            <ul class="deepMenu">
              <li><a href="#">Deep Menu 1</a>
                <ul>
                  <li><a href="#">Sub Deep 1</a>
                  </li>
                  <li><a href="#">Sub Deep 2</a>
                  </li>
                  <li><a href="#">Sub Deep 3</a>
                  </li>
                  <li><a href="#">Sub Deep 4</a>
                  </li>
                </ul>
              </li>
              <li><a href="#">Deep Menu 2</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>

      <li class="point"><a href="index.html">pages</a>
      </li>
      <li class="point"><a href="index.html">light version</a>
      </li>
</ul>