html - 悬停在水平子菜单上时如何避免间距？

Question

我正在 wordpress CMS 上使用 Bones Theme，我正在尝试更改子菜单的方向。

这就是发生的事情：

那是HTML结构：

<nav role="navigation">
<ul id="menu-menu" class="nav top-nav clearfix">
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
            <a href="http://www.blablabla.com/blabla/">MENU-ITEM-1</a>
        <ul class="sub-menu">
            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://www.blablabla.com/blablabla/">submenu-item-1.1</a></li>
            <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://www.blablabla.com/blablabla/">submenu-item-1.2</a></li>
            <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://www.blablabla.com/blablabla">submenu-item-1.3</a></li>
            <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://www.blablabla.com/blablabla/">submenu-item-1.4</a></li>
        </ul>
    </li>
    <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
        <a href="http://www.blablabla.com/blablabla/">MENU-ITEM-2</a>
    </li>
</ul>

这就是 CSS（不是我写的，它是骨骼 CSS 代码）：

nav{
display: block;
}

.nav li {
float: left;
position: relative;
}

.nav li ul.sub-menu{
float: left;
display: none;
width: 100%;
padding: 3px 0px;
}

.nav li ul.sub-menu li a,
.nav li ul.children li a {
padding-left: 10px;
border-right: 0;
display: block;
width: 180px;
}

.nav li ul.sub-menu li:last-child a,
.nav li ul.children li:last-child a {
border-bottom: 0;
}

.nav li:hover ul {
top: auto;
display: block;
}

如何避免第一张图片的问题？

谢谢

Answer 1

将您的子菜单 css 更改为：

.nav li ul.sub-menu{
float: left;
display: none;
width: 100%;
padding: 3px 0px;
margin-top: -8px;
}