Create CSS3 dropdown menu

Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made:

View demo

HTML structure

As you can see in the following lines, the HTML structure does not contain more than we need, it’s a minimal one and easy to understand.

• • Home

• • Tutorials
    • • CSS

     

    • • Graphic design

     

    • • Development tools

     

    • • Web design

     

     

• • Portfolio

• • Services

• • About

• • Contact

 

One more thing, also very important, this is semantic HTML. It’s a logical structure and has a correct meaning, even if styling is totally missing at this point:

In my example, the “Tutorials” section is the only one who contains a sub-list, but you can easy add sub-lists to any item.

The CSS

/* Main */#menu{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none;  
 background: #111;
 background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
 background: -webkit-linear-gradient(#444, #111); 
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-border-radius: 10px;
 border-radius: 10px;
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
}

#menu a{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
 color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */ color: #fafafa;
}

#menu li:hover > ul{
 display: block;
}

/* Sub-menu */
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111); 
    background: linear-gradient(#444, #111); 
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */   
 height: 10px;
 width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */    
 height: 10px;
 width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba); 
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */#menu:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */

Quite long list, huh? This is it…

CSS shape

You may have noticed the triangle shape that appears along with the sub-menu. That’s a CSS shape and its purpose is to increase usability for this CSS3 menu.

It’s made using the

:after

pseudo-element:

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

Taming the IE6 “beast”

The sub-menu is displayed when hovering on a

li

element. As you already know, IE6 doesn’t support hovering on a non-anchor element.

Target IE6 & IE7 browsers

Besides this Jquery fallback, the above CSS includes some lines specifically for IE6 and IE7:

* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */

There are also other IE hacks that won’t pass CSS file validation… If you don’t like it this way, just use conditional comments!

View demo

The end (of this article)

Hope you enjoyed this tutorial, don’t forget to leave a comment!