这个边距/填充是从哪里来的？

Question

例子：http://jsfiddle.net/6a3eZ/46/ 当点击“MISC”或“MISC2”时，它们各自的菜单会滑动打开。然而，它不够平滑；在顶部，有一些奇怪的边距或填充被动画化，使得菜单滑动动画在某个瞬间停止，同时某些未知的东西被动画化，然后快速打开/关闭。

无法确定原因。非常感谢。

jQuery(document).ready(function ($) {
    jQuery('.menu ul').slideUp(0);

    jQuery('.menu li.sub').click(function () {
        var target = jQuery(this).children('a');
        if(target.hasClass('menu-expanded')){
            target.removeClass('menu-expanded');
        }else{
            jQuery('.menu-item > a').removeClass('menu-expanded');
            target.addClass('menu-expanded');
        }
        jQuery(this).find('ul:first')
                    .slideToggle(2000)
                    .end()
                    .siblings('li')
                    .find('ul')
                    .slideUp(2000);
    });
});

- Ray

---

我注意到它有灰色的背景颜色，就像它的父元素一样，所以它可能与CSS继承有关，尝试为子元素进行CSS重置？ - Ofir Baruch

Answer 1

跟踪问题发现是由于 ul.sub-menu 的 display:inline-block; 导致的。应该改为 display:block;。

http://jsfiddle.net/6a3eZ/53/

- Ray

Answer 2

从#menu中移除position:fixed...或者改为position:relative;

#menu{
 position:relative;
}

- PonrajPaul