Basic Multi-level Dropdown Menu Plugin For jQuery - simple-menu.js

A really simple jQuery plugin that transforms nested html unordered list into an animated, hover- or tap-triggered dropdown menu with minimal code.

How to use it:

1. The required HTML structure for the dropdown menu:

<ul class="parent">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2+</a>
    <ul class="child">
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

2. The CSS styles for the dropdown menu. Fell free to modify override the following CSS snippets to create your own styles.

ul.parent, ul.child {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.parent > li {
  display: inline-block;
  position: relative;
}

ul.parent > li a {
  display: block;
  background-color: #F6F6F6;
  padding: 1em 2em;
  height: 1em
}

ul.parent > li a:hover {
  background-color: #34A3EC;
  color: #FFF;
}

ul.child {
  display: none;
  position: absolute;
  top: 3em;
}

ul.child li a { min-width: 100%; }

3. Place jQuery JavaScript library at the bottom of the page.

<script src="//code.jquery.com/jquery.min.js"></script>

4. The JavaScript (jQuery script) to show/hide the sub menu on hover.

$(function() {

  $('ul.parent > li').hover(
      function(){
          $(this).find('ul.child').show(200);
      
      }, function() {
          $(this).find('ul.child').hide(200);

  });
});

---

This awesome jQuery plugin is developed by TeBenachi. For more Advanced Usages, please check the demo page or visit the official website.