CSS菜单和子菜单之间的空格 [英] CSS Space between menu and submenu
本文介绍了CSS菜单和子菜单之间的空格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我想要做的：
如果您发现菜单和子菜单之间有空格。
If you noticed there is space between the menu and the submenu.
问题是子菜单不工作，因为当鼠标指针离开菜单时，子菜单消失。
The problem is that the submenu doesn't work this way, because when the mouse pointer leaves the menu the submenu disappears.
它只有在看起来像这样：
It only works if it looks like this:
>
如何离开菜单和子菜单之间的空间并使其工作？
How can I leave the space between the menu and the submenu and get it to work?
我的代码： / strong>
My Code:
HTML ：
<body>
<nav>
<ul>
<li><a href="#">One</a>
<ul>
<li><a href="1.html">1.1</a></li>
<li><a href="2.html">1.2</a>
</ul>
</li>
<li><a href="#">Two</a>
<ul>
<li><a href="3.html">2.1</a></li>
<li><a href="4.html">2.2</a></li>
<li><a href="5.html">2.3</a></li>
</ul>
</li>
<li><a href="#">Three</a>
<ul>
<li><a href="6.html">3.1</a></li>
<li><a href="7.html">3.2</a></li>
</ul>
</li>
<li><a href="8.html">Four</a></li>
</ul>
</nav>
</body>
CSS：
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;
}
推荐答案
code>：before 以扩展hoverable区域：
You could make use of :before to extend the "hoverable" area:
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
这篇关于CSS菜单和子菜单之间的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
