懸停在水平子菜單上時如何避免間距？

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; 
}