[jQuery] Position a hidden DIV under a menu item

[jQuery] Position a hidden DIV under a menu item


Hello,
I have an existing single-row table driven menu bar that I am looking
to add a drop-down menu to. Below is the code I am trying to use. I
have gone through many iterations but I seem to always get the same
error:
"$('#appMenuDropDown').style has no properties"
Can someone please take a look and offer a suggestion or two?
Thanks!
Derek
$(document).ready(function () {
    //hide the drop down menu DIV:
    $('#appMenuDropDown').hide();
    //Get the offset for the main menu bar item:
    var MainMenu = $('a#menuItem');
    var offset = MainMenu.offset();
    //Set the position of the hidden DIV:
    $('#appMenuDropDown').style.top = offset.top + 20 + 'px';
    $('#appMenuDropDown').style.left = offset.left + 'px';
    //Toggle showing the drop-down DIV:
    $('a#menuItem').mouseover(function() {
    $('#appMenuDropDown').toggle(400);
    return false;
    });
});