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

Question

我正在与骨头主题上的WordPress的CMS和我试图改变子菜单的方向。

这是发生了什么：

这就是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; 
}