Create A Multi-Level Drop Down Menu with Pure CSS

Category: CSS & CSS3 , Menu & Navigation | June 21, 2014
Author: twodogstar
Views Total: 26,580
Official Page: Go to website
Last Update: June 21, 2014
License: Unknown

Preview:

Create A Multi-Level Drop Down Menu with Pure CSS

Description:

A flat designed multi-level drop down menu built with plain Html markup and pure CSS. Created by twodogstar.

How to use it:

Code your multi-level dropdown menu using nested Html lists as follows.

<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">Portfolios</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>

Set the parent <li>’s CSS position property to ‘relative’.

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

The CSS to hide the sub menus.

li ul { display: none; }

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #2c3e50; }

Displays the dropdown menu on hover.

li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }

.main-navigation li ul li { border-top: 0; }

Displays second level dropdown menus to the right of the first level dropdown menu.

ul ul ul {
  left: 100%;
  top: 0;
}

Simple clearfix.

ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }

You Might Be Interested In:


10 thoughts on “Create A Multi-Level Drop Down Menu with Pure CSS

  1. shivam

    its very poor working please don’t share .because mobil version its not good .

    Reply
  2. Mario Lukačić

    Great menu thanks for sharing.
    @disqus_MY4GFFfVmy:disqus it’s not made for mobile, and its so easy to adapt it to mobile so don’t be lazy and copy -> paste

    Reply
  3. Eric S

    why the fucking line numbers that make this impossible to copy/paste ?!?!

    Reply
    1. Seif Sayed

      click on the raw button to view the code without line numbers

      Reply
  4. Isaac

    How would this be changed to allow normal UL tags in the body of the page and only affect the navigation menu with CSS?

    Reply

Leave a Reply