为什么DIV不在正确的位置？

Question

好的，这是问题所在。我有一大堆项目的无序列表。对于每个项目，都有一个相应的DIV，当物品悬停时将会下降。

该示例可以找到here。

现在，它工作正常，除非您向下滚动页面，然后尝试将鼠标悬停在该项目上。然后，它在页面上向下滑动，超出预期的范围。

<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> 

... 

任何想法，为什么出现这种情况：

下面是从页面的相关代码上面链接？

Answer 1

这个问题似乎是与UI的position方法.. 以下似乎做工精细

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

演示：http://www.jsfiddle.net/jnUsN/1/

Answer 2

嗯，我发现一些工作：

[view modified sample]

相关代码：

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

...因为Chrome浏览器不会使正确的第一次尝试：

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