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

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;