显示下拉菜单时出现间歇性错误

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，直到它的工作原理。