jQuery menu missing top portion after sliding down

[bitayaz]

I've got this here fiddle, and it's pretty close to what I want, but there's a couple of problems. First off, the top portion of the inner menu disappears once the menu reaches its full height. Secondly, if you mouse in and out of the menu while it's transitioning, it just kind of... stops. (What I'd like is for when you get back into it, it just expands back out for the duration of your mouse being in there, and resumes collapsing once your mouse exits).If I get rid of the .stop(), then it does a dancing thing, rather than what I mentioned I want.Edit: The top portion missing was fixed by adding some padding to pillars-body (any at all, even if it doesn't impact the view, fixes it. Strange). However, the menu still just stops when I re-enter as it's collapsing. Further edit: Fixed the menu just stopping by switching to slideToggle instead of slideUp and slideDown.Here's the html:\[code\]<div id="mission-statement-container"><div class="pillars"> <div class="pillars-body"> <div><span class="pillar-indicator"></span><span class="pillar-text">First Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Second Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Third Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Fourth Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Fith Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Sixth Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Seventh Pillar</span> </div> <div><span class="pillar-indicator"></span><span class="pillar-text">Eighth Pillar</span> </div> </div> <div class="pillars-demo">PILLARS</div></div>\[/code\]And the javascript:\[code\]$(".pillars-body").hide();$(".pillars").hover(function () { $(".pillars-body").stop().slideDown();}, function () { $(".pillars-body").stop().slideUp();});\[/code\]And the CSS for good measure:\[code\].pillar-indicator { display: inline-block; height: 15px; width: 15px; margin-left: 20px; margin-right: 15px; background: yellow; }.pillars-body { background: black; color: white;}.pillars-body div { margin-top: 10px;}.pillars { position: absolute; top: 0; left: 0;}.pillars-demo { float: left;}\[/code\]Further note: I just noticed that if you move the mouse out of the menu while it's expanding, and then come back to it after it collapses and make it expand again, then it doesn't hide the top portion once it fully expands, if that means anything.