Fixed positioning a list element on mouse over - jQuery

I want to show overflow area in a list element when the mouse over.

Normally element's height set to 200px and has an overflow area (not showing.).

$('#extra_product ul li').live('mouseenter',function(){
    var t = $(this);
    var sHeight = t.height();
    t.css({"height":"auto","z-index":"999"});
    var eHeight = t.height();
    t.height( sHeight ).animate({ height: eHeight });
});

This is working but other elements are affecting and moving to next and down. I don't want to affect other elements, just animate to actual height an开发者_开发百科d stay over the below element.

Working demo URL : http://jsfiddle.net/D9P7V/

this is how i did it, it is not perfect yet you might need some css tweaks of course the trick i used:

in javascript, clone the element to be shown, and append it to the body, so it cannot influence the other markup anymore, then position it over the element, and show it (animate it, anything you like)

example started from your code: http://jsfiddle.net/D9P7V/4/

edit added solution without cloning

another solution, if you want to leave the markup in, and don't clone, is setting the LI element on position: relative, and placing the div with extra about content absolute to that LI.

example can be found here: http://jsfiddle.net/D9P7V/5/

end edit

you should use position absolute ( inside a relative div) and then your bottom div wont be affected