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

Question

显示下拉菜单时遇到问题。

fiddler：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中的最高值，直至其有效。