Elegant Drop Menu with CSS only
Spread it!
Why do we love to use Drop Menu to display our navigation? Because, it saves space for our website. If you’re building a website with many categories, you need to use drop down menu technique for sure. We can find over internet a lot of tutorials show us how to build a Navigation with drop effect by using Javascript. Today, with this tutorial, you will see a simplest way to build a same effect by using CSS only. With some CSS make-up, your menu will be elegant. Not sure which one is easiest, but for sure it’s the simplest menu comes with drop effect: horizontal and vertical navigation.
So, check a demo or download it now.
Updated: It’s already supported IE6.
At first, take a look at what your Navigation should be. That’s your menu before using CSS.
Step 1: HTML Code
As I said above, this tutorial comes with CSS only, you don’t need to include any javascripts to your <head> tag
<ul id="navigation"> <li class=""> <a href="#">Parent Item 1</a> </li> <li class=""> <a href="#">Parent Item 2</a> <ul> <li class=""> <a href="#">Child Item 1</a> </li> <li class=""> <a href="#">Child Item 2</a> </li> <li class=""> <a href="#">Child Item 3</a> </li> <li class=""> <a href="#">Child Item 4</a> </li> <li class=""> <a href="#">Child Item 5</a> </li> </ul> </li> <li class=""> <a href="#">Parent Item 3</a> <ul> <li class=""> <a href="#">Child Item 1</a> </li> <li class=""> <a href="#">Child Item 2</a> </li> </ul> </li> <li class=""> <a href="#">Parent Item 4</a> </li> </ul>
As code above, you see that all child items will be enclosed inside its Parent Item. We’re using 2 tiers of menu, and the structure of each one completed with Parent and Child is:
<!-- Begin parent item --> <li class=""> <a href="#">Parent Item</a> <!-- Begin Child Items Group--> <ul> <!-- Begin Child Item--> <li class=""> <a href="#">Child Item 1</a> </li> <li class=""> <a href="#">Child Item 2</a> </li> </ul> <!-- End Child Items Group--> </li> <!-- End parent item -->
Step 2: CSS Code
Ya! Look at CSS code below. I will organize CSS code into each applied part. CSS code for the hold Navigation and Parent Items is:
/* Navigation */ #navigation { list-style: none; font-family: "Century Gothic", Verdana, Arial, Sans-Serif; margin: 0; padding: 0; font-size: 1.2em; } /* CSS for each Parent Item */ #navigation li { clear: both; height: 2em; } #navigation li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; } /* Change background color and font color of parent items when mouse hover */ #navigation li:hover a, #navigation li a:hover { background: #999; color: #fff; }
And below is for Child Items
/* Applie to group of Child Items Each Child Item will be invisible by default */ #navigation ul {display: none;} /* Each Child Item will be visible if mouse hover */ #navigation li:hover ul {display: block;} #navigation ul { list-style: none; float: left; margin: 0; padding: 4px 8px; } #navigation ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; }
Finally, we have to reset and re style the link inside each child item because the link already formatted above, you can find it inside css code block of Parent Item.
/* Reset and re style link of each child item */ #navigation li:hover ul li a, #navigation ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #navigation li:hover ul li a:hover, #navigation ul li a:hover { background: none; color: #000; }
That’s all we need to make the Navigation works.
In this tutorial, I only show you how to make the horizontal drop. You will easy to do the same with drop down vertical menu effect by downloading my code.
Advantage
This technique is easy to customize because the code is so simple. With just a little bit of CSS and HTML code, you can build a navigation with same drop effect as others javascript.
Disadvantage
Good to build a simple navigation with 2 tiers menu, but so complicated with more than 3 tiers menu. When you choose a solution for your drop menu with more than 2 tiers, you should chose another technique. Because, it will be a complex CSS code that hard to control and customize.
And? Not Support IE6 (IE6 again
)). But work perfect with IE7+
Update
Some guys complained about not supporting IE6. Actually, It’s easy to make it support in IE6. In this tutorial, I would like to recommend a small script Whatever:hover and one post I published long time ago Don’t kick your visitors’s IE 6 and below out of your css layout. I really don’t get what web designers want. When I published a post with saving IE6 in design, they said IE6 must die, let’s forget it. In contrast, when a post was published that ignore IE6 out of design, they told: “Hey man, IE is important”. Hehehe, Web designers, what do you want?
Ok, I’m not a talkative guy. Let’s make my tut supports IE6.
Go to this link above that I recommend to download script Whatever:hover. Then link whatever:hover to the body element, and you’re all set. Code will like this:
body {
...
...
...
behavior: url("csshover3.htc");
}
Of course, you have already upload csshover3.htc into your web server.
Absolutely, IE6 will not display correct your style as other browsers do. Add these code into your HTML file. With these code, your ugly IE6 can be display better.
<!--[if IE 6]>
<style type="text/css">
#vertical-navigation li:hover ul li a,
#vertical-navigation ul li a
{
line-height: 50%;
}
#vertical-navigation ul
{
top: 2.5em;
}
</style>
<![endif]-->
I updated the code and example, you can download it again.
P/S: Hi guys, I really appreciated all of your comments. Thank you!
41 User Comments
Trackbacks/Pingbacks
-
-
13. Sep, 2009
Elegant Drop Menu with CSS only…
Create a Drop Menu effect with CSS only. The easiest way to build drop horizontal or vertical navigation with CSS. You don’t have to include any javascript library because it using the CSS technique only….
-
-
13. Sep, 2009
Elegant Drop Menu with CSS only…
Create a Drop Menu effect with CSS only. The easiest way to build drop horizontal or vertical navigation with CSS. You don’t have to include any javascript library because it using the CSS technique only….
-
-
13. Sep, 2009
Elegant Drop Menu with CSS only…
Create a Drop Menu effect with CSS only. The easiest way to build drop horizontal or vertical navigation with CSS. You don’t have to include any javascript library because it using the CSS technique only….
-
-
14. Sep, 2009
[...] Read the original article [...]
-
-
14. Sep, 2009
[...] This post was mentioned on Twitter by Lam Nguyen. Lam Nguyen said: Elegant Drop Menu with CSS only http://bit.ly/wTusQ [...]
-
-
14. Sep, 2009
[...] Read more: Elegant Drop Menu with CSS only | AEXT.NET [...]
-
-
14. Sep, 2009
[...] Advertisement Elegant Drop Menu with CSS only [...]
-
-
14. Sep, 2009
[...] Elegant Drop Menu With CSS Only [...]
-
-
15. Sep, 2009
[...] Elegant Drop Menu with CSS only [...]
-
-
21. Sep, 2009
[...] Elegant Drop Menu with CSS only [...]
-
-
22. Sep, 2009
[...] Elegant Drop Menu with CSS only | AEXT.NET (tags: css navigation menu tutorials) [...]
-
-
23. Sep, 2009
[...] Elegant Drop Menu with CSS only [...]
-
-
29. Sep, 2009
[...] Elegant Drop Menu with CSS | Demo Categorías:CSS, Tutoriales Etiquetas:CSS, menu, tutorial Comentarios (0) [...]
-
-
07. Oct, 2009
[...] Elegant Drop Menu with CSS only | AEXT.NET (tags: dropdownmenu css webdesign tutorials navigation html web dropdown) [...]
-
-
02. Dec, 2009
[...] Elegant Drop Menu with CSS onlyIf you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
02. Dec, 2009
[...] Elegant Drop Menu with CSS onlyIf you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
02. Dec, 2009
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
02. Dec, 2009
[...] Elegant Drop Menu with CSS onlyIf you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
03. Dec, 2009
[...] Elegant Drop Menu with CSS onlyIf you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
04. Dec, 2009
[...] Elegant Drop Menu with CSS only [...]
-
-
06. Dec, 2009
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
07. Dec, 2009
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
08. Dec, 2009
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
09. Dec, 2009
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
14. Dec, 2009
[...] Elegant Drop Menu with CSS only [...]
-
-
03. Jan, 2010
[...] Elegante Submeu usando apenas CSS [...]
-
-
09. Jan, 2010
[...] Elegant Drop Menu With CSS Only [...]
-
-
09. Jan, 2010
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
-
-
29. Jan, 2010
[...] CSS link Richinstyle.com Dupham.com Quirksmode.org webanthology.net aext.net [...]
-
-
24. Feb, 2010
[...] Elegant Drop Menu with CSS only If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution. [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
Actually I’ve tested it in IE7 and the dropdowns are shifted to the right. You might wanna double-check the demo
Otherwise, thanks for the tut
Oh god, I have just take a look in IE 7. My bootcamp got wrong for days. I will update it later. Thanks for notifying!
Hey no problem
Leave a reply here so I see when you update it. Thanks!
This is nice and simple, but as long as 14% of my users are IE6 users, we still need support for IE6. Last time I checked, IE7 is the most used of the IE browsers.
Doesn’t work in IE6 = it’s useless!
There are more elegant solutions for doing this.
It’s already supported IE6. Hope see you around! Thanks!
Nice tutorial once again. These is one of my favorite website right now. You really rock! Step by step coding that will help a lot.
Данная публикация имеет четко выраженный информативный стиль, спасибо Вам.
Thanks Lam.
This is great. and elegant.
Kayzah, u should either post your more elegant solutions or look up ‘elegance’.
great, will defo try this!
first time on this site…will defo bookmark it
im just a beginner
I updated it. That caused by last time when I edit CSS code for 2 navigation in example file, I get messed up and put the wrong position attribute for the second one. Thanks again!