Question

I have the following CSS:

<ul id="nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown Appear 1</a>
    <ul class="dropdown-menu">
        <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
    </li>
    <li><a href="#contact">Somelink</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown Appear 2</a>
    <ul class="dropdown-menu">
        <li><a href="#">Another Item 1</a></li>
            <li><a href="#">Another Item 2</a></li>
        </ul>
    </li>
</ul>

Currently in CSS the dropdown-menu has a “display: none” property set. I want to make it so that without having to assign ID’s to any of my DOM elements, a user can hover over or click “Dropdown Appear 1” or “Dropdown Appear 2” and show their respective dropdown menus. How do I accomplish this? (Would be nice if there was a slide down transition.)

Answer 1

The easiest way would be to apply the hover to the li, that way when the user hovers over the sub-menu they don’t trigger the mouseout event from leaving the a element:

$('li.dropdown').hover(
    function(){
        $(this).find('ul').slideDown();
    },
    function(){
        $(this).find('ul').slideUp();
    });

JS Fiddle demo.

References:

• hover().
• find().
• slideDown().
• slideUp().