tidy-menu is a clean menu system, primarily based on CSS3, and controlled by JavaScript, with an emphasis on maintaining the order of the associated HTML, with no dependencies on any third-party libraries such as JQuery.

Must Read: Responsive Sidebar Menu With SubMenu HTML CSS and JavaScript

How to make use of it:

1. Load the required files for a menu.

<link rel="stylesheet" href="menu.css">
<script src="menu.js"></script>

2. HTML syntax to create a horizontal dropdown from nested HTML lists as shown below:

<ul class="Menu -horizontal">
  <li class="-hasSubmenu -noChevron"> <a href="#" data-icon="apps"></a>
    <ul>
      <li><a href="#">Bacon</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Amet</a></li>
    </ul>
  </li>
  <li class="-hasSubmenu"> <a href="#">Alpha</a>
    <ul>
      <li><a href="#">Bacon</a></li>
      <li><a href="#">Ipsum</a></li>
      <li class="-hasSubmenu"> <a href="#">Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Amet</a></li>
      <li class="-hasSubmenu"> <a href="#">Another Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li class="-hasSubmenu"> <a href="#">Sub-sub-menu!</a>
            <ul>
              <li><a href="#">Bacon</a></li>
              <li><a href="#">Ipsum</a></li>
              <li><a href="#">Dolor</a></li>
              <li><a href="#">Amet</a></li>
            </ul>
          </li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Beta</a></li>
  <li class="-hasSubmenu"> <a href="#">Gamma</a>
    <ul>
      <li><a href="#" data-icon="">Ipsum</a></li>
      <li class="-hasSubmenu"> <a data-icon="cast" href="#">Dolors</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
      <li><a href="#" data-icon="">Amet</a></li>
      <li><a href="#" data-icon="cake">Tail pork loin chicken</a></li>
      <li><a href="#" data-icon="">Bacon ipsum dolor amet pork loin rump filet mignon swine</a></li>
    </ul>
  </li>
  <li><a href="#">Delta</a></li>
  <li><a href="#">Epsilon</a></li>
</ul>

3. HTML syntax to create a vertical dropdown from nested HTML lists as shown below:

<ul class="Menu -vertical">
  <li><a href="#">Bacon</a></li>
  <li><a href="#">Ipsum</a></li>
  <li class="-hasSubmenu"> <a href="#">Dolor</a>
    <ul>
      <li><a href="#">Bacon</a></li>
      <li><a href="#">Ipsum</a></li>
      <li class="-hasSubmenu"> <a href="#">Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Amet</a></li>
      <li class="-hasSubmenu"> <a href="#">Another Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li class="-hasSubmenu"> <a href="#">Sub-sub-menu!</a>
            <ul>
              <li><a href="#">Bacon</a></li>
              <li><a href="#">Ipsum</a></li>
              <li><a href="#">Dolor</a></li>
              <li><a href="#">Amet</a></li>
            </ul>
          </li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Amet</a></li>
</ul>

See Demo And Download

Official Website(dylanh333): Click Here

This superior jQuery/javascript plugin is developed by dylanh333. For extra Advanced Usage, please go to the official website.