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 acplish this? (Would be nice if there was a slide down transition.)

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 acplish this? (Would be nice if there was a slide down transition.)

• javascript
• jquery
• html
• css

3 Answers 3

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().

Is there a reason you want to do this specifically with JS? Effects, animations, etc?

Not sure if you are just trying to display the sub menu on hover because you can do this purely with CSS (and without adding unique ID's to each nested unordered list). You would set your nested list's display to "none" and on hover over the parent list's "li" element, you could change the display to "block".

#nav li.dropdown ul { display: none; }

#nav li.dropdown:hover ul { display: block; }

Again, not sure if you wanted to use JS specifically. But, at least with this route, the user will still see the dropdown in case he/she has JS disabled (which we hope not!).

  $(document).ready(function(){

  $('.dropdown').each(function(){
  $(this).find('ul').hide();
  });


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

  });
        });