Как избежать интервала при наведении курсора на горизонтальное подменю?

Question

Я работаю с темой Bones на 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; 
}