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.

#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.

#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.

#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.

#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.

#cssmenu a {
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}
#cssmenu > ul > li.active a {
  background: #646464 url(images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  filter: none;
}
#cssmenu > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  filter: none;
}
#cssmenu > ul > li a {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  border-bottom: 1px solid #5d5d5d;
  border-top: 1px solid #5d5d5d;
  border-right: 1px solid #5d5d5d;
  line-height: 34px;
  padding: 0 35px;
  filter: none;
}
#cssmenu > ul > li a:hover {
  background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu li ul li {
  text-align: center;
}
#cssmenu li ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}

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:

background: linear-gradient(angle or side or corner, color stop, color stop);

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.

box-shadow: inset 0 0 10px #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.

border-radius: 0 5px 5px 0;

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!


WordPress › Error

There has been a critical error on this website.

Learn more about troubleshooting WordPress.