Really simple hover menus with jQuery

I got the inspiration for this simple menu from this blog post. It's based on the hover intent jQuery plugin by Brian Cherne.

The requirements:

Hide menu on mouse out:

Display menu on mouse over:

The HTML

<div id="categories-menu" class="hover-menu">
  <h2>Categories</h2>
  <ul class="actions no-style" style="display: none">
    <li><a href="">Add</a></li>
    <li><a href="">Edit</a></li>
    <li><a href="">Delete</a></li>
  </ul>
</div>

The JavaScript

<script type="text/javascript">
$(document).ready(function() {

  function show() {
    var menu = $(this);
    menu.children(".actions").slideDown();
  }
 
  function hide() { 
    var menu = $(this);
    menu.children(".actions").slideUp();
  }

  $(".hover-menu").hoverIntent({
    sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
    interval: 50,   // number = milliseconds for onMouseOver polling interval
    over: show,     // function = onMouseOver callback (required)
    timeout: 300,   // number = milliseconds delay before onMouseOut
    out: hide       // function = onMouseOut callback (required)
  });
 
});
</script>

Positioning the hover menu over the content

The above example will show the menu inline with the content, effectively pushing it down. To avoid that, use this HTML:

<div id="categories-menu" class="hover-menu" style="position: relative">
  <h2>Categories</h2>
  <ul class="actions no-style" style="position: absolute; background: white; display: none;">
    <li><a href="" id="edit-mode">Edit mode</a></li>
    <li><a href="" class="last">Add</a></li>
  </ul>
</div>

hoverIntent alternative

See this snippet for an alternative solution.