Прерывистая ошибка при отображении выпадающего меню

Question

У меня возникают проблемы при отображении выпадающего меню.

скрипача: http://jsfiddle.net/GxrSk/

Простой HTML код:

<nav> 
     <ul id="top-menu"> 
     <li class="parent"> 
      <a href="#">MENU ITEM</a> 
      <ul class="sub-menu"> 
       <li><a href="#">ITEM 1</a></li> 
       <li><a href="#">ITEM 2</a></li> 
      </ul> 
     </li> 
     </ul> 
</nav> 

CSS-:

ol, ul { 
    list-style: none; 
    padding:0px; 
    margin:0px; 
} 


nav { margin-top: 28px; } 

#top-menu li { position: relative; } 

#top-menu > li { display: inline-block; margin-left: 40px; } 

#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; } 

ul.sub-menu { display: none; top: 26px; position: absolute; min-width: 137px; z-index: 9999; } 

ul.sub-menu > li > a { text-align: center; display: block; } 

#top-menu li:hover > ul.sub-menu { display: block; } 

Посмотрите, проблема в том, что иногда я могу перемещаться по меню и несколько раз, когда я попробуйте ввести его, меню скрыто.

Если кто-то не может понять, напишите в комментариях ниже.

Answer 1

Смена верхней части на верхнюю часть.

padding-top: 20px; 

Answer 2

пытаются сделать ul.sub-menu { top:20px; }

ol, ul { 
    list-style: none; 
    padding:0px; 
    margin:0px; 
} 


nav { margin-top: 28px; } 

#top-menu li { position: relative; } 

#top-menu > li { display: inline-block; margin-left: 40px; } 

#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; } 

ul.sub-menu { display: none; top: 20px; position: absolute; min-width: 137px; z-index: 9999; } 

ul.sub-menu > li > a { text-align: center; display: block; } 

#top-menu li:hover > ul.sub-menu { display: block; } 

Answer 3

пропитание уменьшая топ-значение в ul.sub-menu, пока он работает.