Create A Multi-Level Drop Down Menu with Pure CSS

Category: CSS & CSS3 , Menu & Navigation | June 21, 2014
Author:twodogstar
Views Total:215,017 views
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.

See Also:

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:


11 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. 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
    1. Eric Sebasta

      put the whole thing in a tag, then add nav in front of the css. ie… nav ul {
      your site navigation is supposed to be enclosed in a nav tag anyway. 😉

      Reply
  4. Chinthaka Wickramanayake

    I searched many places including many famous sites. they have support documents, but those aren’t use for beginners. they went only for second level, but you went for third level, which teach us to go for any level. Thanks for educating me and the social.

    Great help!!!

    Reply

Leave a Reply