1

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.

2 Answers 2

2

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');
             }

});
2

No javascript required.

HTML:

<ul id='dropdowns'>
    <li>First menu
        <ul>...</ul>
    </li>
    ...
</ul>

CSS:

#dropdowns ul { display: none }
#dropdowns:hover ul { display: block }

Everything else as with any other CSS dropdown. The only thing you'd need to do differently is show all menus when hovering over the outer dropdown container.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.