下拉菜单和子菜单之间的差距答案

【问题标题】：Gap Between dropdown menu and sub menu下拉菜单和子菜单之间的差距
【发布时间】：2017-03-03 15:40:28
【问题描述】：

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

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>

【问题讨论】：

为什么不试试.lmao li ul { display: none; position: absolute; border-top: 5px solid black; margin-top: 0px; }check this demo
在这种情况下最好使用填充而不是边距。尝试在您的课程菜单中更改它。

标签： html css

【解决方案1】：

更新：

既然您给出了参考，悬停菜单实际上与 li 本身并没有距离，但它位于它的正下方。在示例站点上， li 的高度大于其中的文本，并且具有 position: relative;在上面。

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

使用更新的解决方案检查以下更新的代码段。

边距不是“可悬停的”，因此不会触发悬停选择器。在“可悬停”时保持距离的一种方法是使用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>

【讨论】：

填充什么呢？
我在 lmao li ul 上的 padding-top 和 ul.lmao 上的 padding-bottom 已经累了，但它不起作用。
@RhysEdwards 我已经更新了答案以反映我的意思。
@RhysEdwards 更新的问题是否帮助您解决了问题？如果您还有其他问题，请随时提问。
嗨，这有点帮助，我一定会研究更好的命名约定。但是通过添加填充，它在我的下拉列表顶部和它的边框顶部之间创建了一个间隙。看到我希望下拉菜单上的 ul 有一个边框顶部，就像在这个网站上一样：

【解决方案2】：

body {
    background-color: #cac3bc
}
nav {
	float: left;
}
nav ul ul {
	display: none;
}
	nav ul li:hover > ul {
		display: block;
	}
	nav ul {
	background-color: #fff;
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;
	margin-right: -80px;
}
	nav ul li {
	float: left;
}
		nav ul li:hover {
			border-bottom: 5px solid #f5aa65;
            color: #fff;
			
		}
		nav ul li a:hover {
			color: #000;
		}
	
	nav ul li a {
		display: block; 
		padding: 15px 15px;
		font-family: 'PT Sans', sans-serif;
		color: #000; 
		text-decoration: none;
	}
	nav ul ul {
	background-color:#fff;
	border-radius: 0px; 
	padding: 0;
	position: absolute;
	top: 100%;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
	nav ul ul li {
		float: none; 
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #000;
		}

nav ul ul:before {
        content: "";
        display: block;
        height: 20px;
        position: absolute;
        top: -20px;
        width: 100%;
    }

<body>
<nav>
	<ul>
		<li><a href="#">One</a>
        	<ul>
				<li><a href="1.html">A</a></li>
				<li><a href="2.html">B</a>
            </ul>
        </li>
		<li><a href="#">Two</a>
			<ul>
				<li><a href="3.html">A</a></li>
				<li><a href="4.html">B</a></li>
				<li><a href="5.html">C</a></li>
			</ul>
		</li>
		<li><a href="#">Three</a>
			<ul>
				<li><a href="6.html">A</a></li>
				<li><a href="7.html">B</a></li>
			</ul>
		</li>
		<li><a href="8.html">Four</a></li>
	</ul>
</nav>
</body>

【讨论】：