How To Create a Clean & Modern CSS Drop-Down Menu

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

If you would like, you can download the source code for this menu which has the HTML, CSS, and Images all in a nice zip file. And you can view the demo right here.

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.

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.

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.

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.

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.

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.

Linear Gradient

The background: linear-gradient property gives us the shiny, web 2.0 look for our menu. The parameters needed for the linear-gradient property are:

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.

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.

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 The Author: Russell Taylor

Russell Taylor is professional web developer and entrepreneur based out of California with over 8 years experience in the industry. His latest project is CSS MenuMaker which provides free drop down menus to web developers and a Wordpress Responsive Menu Plugin for the Wordpress community.

11 Responses to “How To Create a Clean & Modern CSS Drop-Down Menu”

  1. Julia Agnes says:

    Cool and easy to follow tutorial!) Thanks a lot

  2. DerekHogan says:

    great tutorial. thanks!

  3. Syamsul Alam says:

    Wow!! That’s one sick css tutorial you got there!! Bookmarked it for future reference!

  4. Stacy says:

    Very useful tutorial!

  5. Matt says:

    Awesome tutorial….Is there an easy way to add something to the css to center the whole menu on the page?

  6. yos says:

    where’s the sampe??????????

  7. kanzz_254 says:

    nyce…

  8. The same for the tutorial is in the link above under “Conclusion”. You have to go back and read the article.

  9. Sinkwriter72 says:

    I was able to get it to look like yours, except for one piece: when I hover over my main nav bar button to show the drop-down menu, the drop-down menu is not evenly set up directly underneath the main button. Instead, the width of the drop-down menu buttons is sized almost the full width of the page. When I go into the “cssmenu ul ul” and change the min-width to, say, 10% or 20%, the drop-down buttons return to a normal width size, but they’re far to the left of the main button they should be stacked under.

    What am I missing?

    Thanks for the great tutorial!

  10. Mustak Khan says:

    nice dropdown

Leave a Reply