I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:
$(document).ready(function(){
$("#userlink").mouseover( showMenu );
});
// cache the menu object for optimum performance
var $menu = $("#menu"), pos, width;
var showMenu = function(){
//get the position of the placeholder element
pos = $(this).offset();
width = $(this).width();
//show the menu directly over the placeholder
$menu.css({ "left": (pos.left + width) + "px", "top":pos.top + "px" }).show();
}
I'm using that, but the div "menu" doesn't ever show up. I know it's triggering the function because I can get an alert to fire, but the rest apparently isn't working.
<div style="position: absolute; display: none;float:left;" id="menu">
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
<div style="float:left;" id="userlink">John Smith</div>
What am I doing wrong??