我希望菜单子菜单在菜单下方显示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>
答案 0 :(得分：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>
答案 1 :(得分：1)
更新：
现在您提供了参考，悬停菜单实际上与li本身并不相同，但它位于它的正下方。在示例网站上，li的高度大于文本内部的高度，并且位置为：relative;在上面。
下拉列表位于这个较大的<li>元素正下方，其top: 100%;元素与触发下拉列表的文本相距较远。
使用更新的解决方案检查更新后的Snippet。
<小时/> 保证金不可以h＆＃39;因此不会触发悬停选择器。一种可以让它保持距离而且可以躲避的方法。是使用
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>