Question

if you go to this page and hit one of the left dropdowns – http://ryancoughlin.com/hp/index.php?c=about – it almost looks like it is glitching/bumping, once it gets to the bottom or rides back up top.

Is it possible to fix this? Or is this how it behaves in jQuery?

CODE:

$('.menu-header').click(function() {     $(this).next().toggle('slow');     return false; }).next().hide(); 

Answer 1

In your CSS, change

#left ul li{     font-size:.7em;     margin:5px 0; } 

to

#left ul li{     font-size:.7em;     padding:2px 0 3px 0; } 

The issue is that your margins are collapsing with the margins of the h2 at the beginning and end of the animation, but not during the animation, because overflow of the ul is not visible*, preventing the collapsing. The lack of collapsing increases the effective size of the ul.

*W3 on the box model and margin collapsing:

Vertical margins of elements with ‘overflow’ other than ‘visible’ do not collapse with their in-flow children.