var menuItems;

$(document).ready(function() {

  // Get each primary menu item and loop over them
  menuItems = $("#primary > ul.menu > li");
  menuItems.each(function() {

    // Add a handler to display the menu on mouseover.
    $(this).bind("mouseover", function() {

      // Clear the highlight on the main menu items
      menuItems.each(function() {
        $(this).removeClass('hover');
      });

      // This class keeps the main menu option lit while the submenu's displayed
      $(this).addClass('hover');

      // Hide the lower menu.
      $('#submenu').empty();

      // Grab the submenu.
      var submenu = $(this).find('ul.menu');

      if(submenu.length > 0) {

        var clone = submenu.clone();

        // Hide it so we can fade it in.
        clone.hide();

        // Move a copy of the menu down below the primary and show it.
        $('#submenu').append(clone);
        $('#submenu').fadeIn();
        clone.fadeIn();
      }
      else {
        // If there's no submenu to display, hide its container.
        $('#submenu').fadeOut();
      }
      
    });
  });
});