顯示下拉菜單時出現間歇性錯誤

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