I am going to show you how to create a CSS3 drop down menu using all the latest CSS3 techniques. We will go over how to use border radius, gradients, and box shadows to turn a basic drop down menu into glossy styled navigation.

To some, these new CSS3 properties might be intimidating, but I will try to break the code up into small chunks and explain as we go.

Demo

The HTML Structure

The first thing we need to do to build our drop down menu will be to outline the HTML structure. I am using a pretty basic unordered list wrapped with a containing div. I’ve also applied an ‘active’ class to the first LI so that we can have specific styles for an active menu item.

1

2

3

4

5

6

7

8

9

10

11

12

13

<div id='cssmenu'>

<ul>

<li class='active'><ahref='index.html'>Home</a></li>

<li><ahref='#'>Products</a>

<ul>

<li><ahref='#'>Product1</a></li>

<li><ahref='#'>Product2</a></li>

</ul>

</li>

<li><ahref='#'>About</a></li>

<li><ahref='#'>Contact</a></li>

</ul>

</div>

The CSS resets

Now that we have the basic HTML structure for our menu, it is time to start spicing it up with CSS3. I’ll try and break the CSS code into sections and explain it as we go.

The first part of the CSS resets all of the HTML elements to 0 padding, 0 margin, and makes sure that there are no list styles being accidentally applied to the UL. This will give us a solid starting point for our styles.

1

2

3

4

5

6

7

8

9

10

11

#cssmenu ul,

#cssmenu li,

#cssmenu span,

#cssmenu a {

margin:0;

padding:0;

position:relative;

}

#cssmenu ul {

list-style:none;

}

The CSS structure

Once we are sure that there will not be any rogue styles interfering with our menu we can start to apply the CSS that will define the basic structure and behavior of the menu.

Using a float: left; will get all the first level LI elements to stack horizontally.

1

2

3

#cssmenu > ul > li {

float:left;

}

In order to hide the sub menu until we hover over it we need to apply a display: none; property to the second level UL elements. To show the sub menu use the :hover attribute to trigger a display: block;. This will cause the sub menu to reappear when the cursor hovers over its parent LI element.

1

2

3

4

5

6

7

8

9

10

11

12

#cssmenu ul ul {

display:none;

position:absolute;

top:36px;

left:-1px;

min-width:100%;

text-align:center;

*width:100%;/* IE7 hack*/

}

#cssmenu li:hover ul {

display:block;

}

One of the consequences of floating all the first level LI left is that the containing UL will have a height of 0px which means we will not be able to apply styles to it. To fix this we will need to apply a method called Clearfix, which makes sure the main UL will clear the LI when they are all floated left. You can read more about Clearfixes here.

1

2

3

4

5

6

#cssmenu:after,

#cssmenu ul:after {

content:'';

display:block;

clear:both;

}

The CSS design

With the basic CSS resets and structure in place we can now start applying our CSS3 properties to spice up the design. CSS3 allows us to create a well designed menu without using any images, but we will use an image backup for the gradient effect so that our menu will work in older browsers.

Most newer browsers will support this CSS3 property, but we will use the browser specific backups just to ensure maximum compatibility.

Box Shadow

The box-shadow: inset property makes our menu’s active elements look a if they are pressed down. We can use two box shadow declarations in the same line by separating them with a comma. This makes the top of the active button have a larger shadow than the bottom.

1

box-shadow:inset0010px#222222, inset 0 10px 10px #222222;

To use an inset box shadow we need to specify the following parameters:

inset (tells the box shadow to point inward)

horizontal offset

vertical offset

blur radius

color

Again we use the browser specific backups in our CSS to ensure maximum compatibility.

Border Radius

Applying border-radius: to our menu will give it the rounded corners. We will set a border radius for the li:first-child and li:last-child in the menu to give the whole menu a rounded look.

1

border-radius:05px5px0;

To use the border radius we need to specify the following parameters:

top-left radius

top-right radius

bottom-right radius

bottom-left radius

Conclusion

I hope you enjoyed this tutorial. You can view the demo right here. Please feel free to chime in and leave a comment below!

About DesignDisease

DesignDisease is a blog covering the myriads of topics related to the world of design. We provide inspirational posts as well as tutorials & articles. We also created some very popular WordPress themes that you can download for free.

Write For Us

We're always looking for great writers to contribute to our blog. Are you a web/graphic designer who loves writing? Are you looking to gain more exposure in the design community? Well, we want to hear from you!

Stay Up To Date

There are many ways you can subscribe to DesignDisease and read our content. You can subscribe to our RSS feed, follow us on Twitter or find us on Facebook. You can even receive new articles delivered by email if you wish.