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?