Pure CSS Multi-level Navigation – menu.css

Preview:

Description:

menu.css is a tiny CSS library to create multi-level (up to 4) horizontal dropdown menus or vertical expanding menus without any JavaScript.

How to use it:

1. Import the stylesheet menu.css in the HTML file.

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

2. Create a horizontal dropdown menu from a nav list.

<nav>
  <ul class="nav-menu nav-center">
    <li><a href="#">Nav Link</a></li>
    <li><a href="#" class="nav-active">Nav Link</a>
      <ul>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a>
          <ul>
            <li><a href="#">Sub Sub Nav Link</a></li>
            <li><a href="#">Sub Sub Nav Link</a></li>
            <li><a href="#">Sub Sub Nav Link</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
      </ul>
    </li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
  </ul>
</nav>

3. Create a vertical expanding menu from a nav list as follows:

<nav>
  <ul class="nav-menu nav-vertical">
    <li><a href="#">Nav Link</a></li>
    <li><a href="#" class="nav-active">Nav Link</a>
      <ul>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a>
          <ul>
            <li><a href="#">Sub Sub Nav Link</a></li>
            <li><a href="#">Sub Sub Nav Link</a></li>
            <li><a href="#">Sub Sub Nav Link</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
      </ul>
    </li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
  </ul>
</nav>