Elegant Drop Menu with CSS only

written by aext on September 13, 2009 in CSS & HTML with 69 comments
← older posts newer posts →

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.

  • Download
  • Demo
spacer

At first, take a look at what your Navigation should be. That’s your menu before using CSS.

  • Parent Item 1
  • Parent Item 2
    • Child Item 1
    • Child Item 2
    • Child Item 3

 

  • Parent Item 3 
    • Child Item 1
    • Child Item 2

     

 

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.

[smartads]

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-%; } #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!

tags: css example drop down menu

Related Articles

spacer

Label WordPress Theme

spacer

Generate Email Marketing WordPress Theme