CSS Only Multi-level Nested Dropdown Navigation Menu

Preview:

Description:

An SEO-friendly, nice-looking multi-level (nested) dropdown navigation menu built with pure CSS and HTML unordered list.

Supports both horizontal and vertical directions.

How to use it:

1. Download and load the stylesheet pure-css-navigation.css in the document’s head section.

<link rel="stylesheet" href="./pure-css-navigation.css" />

2. Wrap your nav list into a DIV container with the CSS class of ‘pure-css-nav’. Done.

<div class="pure-css-nav">
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li>
        <a href="">About Us</a>
        <ul>
          <li><a href="">Sub #1</a></li>
          <li>
            <a href="">Sub #2</a>
            <ul>
              <li><a href="">Sub #2.1</a></li>
              <li>
                <a href="">Sub #2.2</a>
                <ul>
                  <li><a href="">Sub #3.1</a></li>
                  <li><a href="">Sub #3.2</a></li>
                  <li><a href="">Sub #3.3</a></li>
                </ul>
              </li>
              <li><a href="">Sub #2.3</a></li>
            </ul>
          </li>
          <li><a href="">Sub #3</a></li>
        </ul>
      </li>
      <li>
        <a href="">Portfolio</a>
        <ul>
          <li><a href="">No Children</a></li>
          <li>
            <a href="">1 Child - dlfjkhs adljkfh slakdj </a>
            <ul>
              <li><a href="">Child #1</a></li>
            </ul>
          </li>
          <li>
            <a href="">2 Children</a>
            <ul>
              <li><a href="">Child #1</a></li>
              <li><a href="">Child #2</a></li>
            </ul>
          </li>
          <li>
            <a href="">3 Children</a>
            <ul>
              <li><a href="">Child #1</a></li>
              <li><a href="">Child #2</a></li>
              <li>
                <a href="">Child #3</a>
                <ul>
                  <li><a href="">Child #1</a></li>
                  <li><a href="">Child #2</a></li>
                  <li>
                    <a href="">Child #3</a>
                    <ul>
                      <li><a href="">Child #1</a></li>
                      <li><a href="">Child #2</a></li>
                      <li>
                        <a href="">Child #3</a>
                        <ul>
                          <li><a href="">Child #1</a></li>
                          <li><a href="">Child #2</a></li>
                          <li><a href="">Child #3</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="">Services</a></li>
      <li><a href="">Events</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Careers</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </nav>
</div>

3. Use Font Awesome iconic font for the dropdown caret symbol.

<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />

<div class="pure-css-nav nav-font-icons">
  <nav>
    ...
  </nav>
</div>

4. Equalize the width of the menu items in the first level.

<div class="pure-css-nav nav-justified">
  <nav>
    ...
  </nav>
</div>

5. Change the direction to ‘Vertical’.

<div class="pure-css-nav nav-vertical">
  <nav>
    ...
  </nav>
</div>