Multi-level Dropdown Menu With Pure CSS

Preview:

Description:

Just another pure CSS implementation of the multi-level dropdown menu designed for your site navigation.

How to use it:

First you need to load the core style sheet in the head section of the webpage.

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

Create the multi-level dropdown menu from nested html lists following the markup structure like this:

<div class="navigation-wrapper">
  <div class="container">
    <div class="navigation">
      <div id="main-menu-container">
        <div id="main-menu" class="nav">
          <li class="menuparent">
            <a href="#">Home</a>
            <ul class="sub-menu">
              <li><a href="#">test1</a></li>
              <li><a href="#">test2</a></li>
              <li class="menuparent">
                <a href="#">test3</a>
                <ul class="sub-menu">
                  <li><a href="#">test1</a></li>
                  <li><a href="#">test2</a></li>
                  <li class="menuparent">
                    <a href="#">test3</a>
                    <ul class="sub-menu">
                      <li><a href="#">test1</a></li>
                      <li><a href="#">test2</a></li>
                      <li><a href="#">test3</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="menuparent">
            <a href="#">Template</a>
            <ul class="sub-menu">
              <li><a href="#">test1</a></li>
              <li><a href="#">test2</a></li>
              <li><a href="#">test3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </div>
      </div>
    </div>
  </div>
</div>