Why doesn't this DIV drop down in the right spot?

Question

Okay, here is the problem. I have an unordered list with a bunch of items. For each item, there is a corresponding DIV that will drop down when the item is hovered over.

The sample can be found here.

Now, it works fine unless you scroll down the page a bit and then try to hover over the item. Then it slides down further up the page than it is supposed to.

Here is the relevant code from the page linked above:

<script type="text/javascript">

function doOver(num)
{
    $('#s' + num).position({ of: $('#m' + num),
                             my: 'left top',
                             at: 'left bottom' });
    $('#s' + num).slideDown();
}

</script>

...

<ul id="test" style="width: 400px; height: 25px; background-color: red;">
  <li id='m1' onmouseover='doOver(1)'>TestItem1</li>
  <li id='m2' onmouseover='doOver(2)'>TestItem2</li>
  <li id='m3' onmouseover='doOver(3)'>TestItem3</li>
</ul>

<div id='s1' style='width: 100px; height: 50px; position: absolute;'></div>
<div id='s2' style='width: 100px; height: 50px; position: absolute;'></div>
<div id='s3' style='width: 100px; height: 50px; position: absolute;'></div>

...

Any idea why this happens?

Answer 1

The problem seems to be with the position method of the UI .. the following seems to work fine

function doOver(num)
{
    var $m = $('#m'+num);
    var mPos = $m.position();  // you could you $m.offset() here (depenging on the overall structure)
    var mHeight = $m.outerHeight();
    $('#s' + num).css({ 'top':mPos.top + mHeight, 'left':mPos.left });
    $('#s' + num).slideDown();
}

Demo : http://www.jsfiddle.net/jnUsN/1/

Answer 2

Well, I found something that worked:

[view modified sample]

Relevant code:

function Position(item,parent)
{
    $(item).position({ of: $(parent), my: 'left top', at: 'left bottom' });
}

function doOver(num)
{
    $('#s' + num).css('height','0px');
    $('#s' + num).show();
    Position('#s' + num,'#m' + num);
    $('#s' + num).hide();
    $('#s' + num).css('height','50px');
    $('#s' + num).slideDown();
}

...and because Chrome wouldn't render it right on the first try:

$(function() {
    Position('#s1','#m1');
    Position('#s2','#m2');
    Position('#s3','#m3');
});