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:

On mouse out hide menu:

Categories

On mouse over display menu:

Categories

-Edit

-Delete

The HTML

   1  <div id="categories-menu" class="hover-menu">
   2    <h2>Categories</h2>
   3    <ul class="actions no-style" style="display: none">
   4      <li><a href="">Add</a></li>
   5      <li><a href="">Edit</a></li>
   6      <li><a href="">Delete</a></li>
   7    </ul>
   8  </div>

The JavaScript

   1  <script type="text/javascript">
   2  $(document).ready(function() {
   3  
   4    function show() {
   5      var menu = $(this);
   6      menu.children(".actions").slideDown();
   7    }
   8   
   9    function hide() { 
  10      var menu = $(this);
  11      menu.children(".actions").slideUp();
  12    }
  13  
  14    $(".hover-menu").hoverIntent({
  15      sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
  16      interval: 50,   // number = milliseconds for onMouseOver polling interval
  17      over: show,     // function = onMouseOver callback (required)
  18      timeout: 300,   // number = milliseconds delay before onMouseOut
  19      out: hide       // function = onMouseOut callback (required)
  20    });
  21   
  22  });
  23  </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 :

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