Question

Is there a navigational drop down menu out there that when you hover over one item, every drop down comes down? I know it might be a bit busy, but for this project this is essential. It can use jQuery, just CSS or whatever, as long as it works.

Answer 1

if you give all of the menus a class you can just select them all with jQuery. Assuming they all are display:none; any other show/hide attribute will work the same way. The only issue is when you move your mouse away from one they all will go away.

$("#specialDropDown").live('mouseover',function(){
           $('.dropDown').css('display', 'block');
}); 

$(".drowDown").live('mouseout', function(){
          $('.dropDown').css('display','none');
});

The only issue is when you move your mouse away from one they all will go away. To solve that I suggest having a button that shows them all.

$("#specialDropDown").live('click', function(){
         if($(this).hasClass('activeButton')
            {
               $(this).removeClass('activeButton');    
               $('.dropDown').css('display', 'none');
            }
        else
           {
               $(this).addClass('activeButton');    
               $('.dropDown').css('display', 'block');
             }

});