jQuery hide if mouse not over element onload

If I've got a menu, which for accessability reasons, is visible when the page loads (so if the EU doesn't have JS enabled then 开发者_开发问答they can still navigate around), but I want to hide it if they do have JS enabled, then it's easy enough, just hide it. However I want it to stay open if the mouse is over the element when the event fires.

The problem is (with FF anyway, I presume that this applies to other browser as well) that no events fire off from the mouse to identify that it's currently over the menu if the mouse doesn't move, if that makes sense?

$(function(){
  $("#myMenu").animate({"width": 'toggle'}, 350).hide();
});

I've tried putting it directly into the window load event as well, however this won't work because the event parameter object shows window to be the current target, not the element the mouse is currently over, also this isn't good because of all the problems with window load waiting for images etc etc.

$(window).load(function(e){
  console.log(e);
  $("#myMenu").animate({"width": 'toggle'}, 350).hide();
});

Why don't you just show it indefinitely until the mouse moves, then check to see if the mouse is over it and hide if it's not?

Attach a mousemove event to the window, then check to see if it's over that DOM element:

  $(window).mousemove(function(event) {
    var mouse_x = event.pageX;
    var mouse_y = event.pageY;

    // then get position and height/width of menu's DOM element, hiding if the mouse isn't in it
  });