Where is this margin / indent coming from

Question

Example: http://jsfiddle.net/6a3eZ/46/

When you press "MISC" or "MISC2", their menu opens. However, this is not smooth; at the very top, there are some odd margins or paddings that are animated, causing the menu slide animation to pause for a moment, and something unidentified becomes animated, and then clicks open / closed.

Unable to find a reason. Thank you very much.

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); }); }); 

Answer 1

Tracks the issue to ul.sub-menu display:inline-block; Instead, there should be display:block; .

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

Answer 2

remove a fixed position from #menu ... or change to a position: relative;

 #menu{ position:relative; }