Author: | twodogstar |
---|---|
Views Total: | 215,017 views |
Official Page: | Go to website |
Last Update: | June 21, 2014 |
License: | Unknown |
Preview:

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; }
thanks bro
its very poor working please don’t share .because mobil version its not good .
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
Thank you for a great tutorial.
This is awesome example
How would this be changed to allow normal UL tags in the body of the page and only affect the navigation menu with CSS?
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. 😉
Thanks for great snippet of drop down menu
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!!!