jQuery Offset and Page Scroll for Drop Down Menu
<p>I've got a small issue with the .offset().top value in jQuery.</p>

<p>I'm making a drop down menu function that binds to my selector as follows:</p>

<pre><code>$('.navButton').mouseenter(
    function(){

        var x = $(this).offset().left;
        var y = $(this).offset().top;

        var height = $(this).height();

        var dList = $(this).find('.dropDownList').css('display','block');
        $(dList).css('left',x);
        $(dList).css('top',y+height);


    }

);
</code></pre>

<p>It works magically until I scroll the page down and my .dropDownList continues to display at the offset position.  In other words. If my div that activates the function is at y:200px
and the page is not scrolled, the drop down list appears nicely under my .navButton. But, when I scroll the .dropDownList continues to appear at y:200px even though my .navButton is really only at y:100px now.  </p>

<p>Thoughts?</p>
