We are going to create a CSS3 menu with rounded corners and drop shadows. To some, this can be a daunting task, but I will show you how to tackle this process, so that you will know how to structure your HTML and CSS.

Typically, a menu is created from a list. If you want to know more about lists, be sure to check out our tutorial on css styling lists. You want to begin by creating and structuring your list, complete with active links. This will be important later on, because we will be styling the active link as the normal state, and then you will be styling a hover state as well, allowing you to create a hover effect for your menu. Hover states are essential when creating a navigational menu, because the differentiation tells the user their position within the menu, in relation to the other list items.

For the rest of the html, you could wrap the menu in a container, which I did and gave it a class of menu. This makes it easy to remember. You can specify a width for the container if you want, but I didn’t so the menu runs the entire width of the browser. You do not want to add a background color to this class, because we are going to give it rounded corners. (Similar to the Apple Navigational Menu).

<div class="menu">
   <ul>
      <li><a href="#" >Home</a></li>
      <li><a href="#" id="current">Fruit</a>
         <ul>
            <li><a href="#">Apples</a></li>
            <li><a href="#">Oranges</a></li>
            <li><a href="#">Bananas</a></li>
            <li><a href="#">Pears</a></li>
         </ul>
      </li>
      <li><a href="/about.html">About</a>
         <ul>
            <li><a href="#">Company Info</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">FAQ</a></li>
         </ul>
      </li>
      <li><a href="/contact/contact.php">Contact Us</a></li>
   </ul>
</div>

Here is the CSS code

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }

Our List is wrapped in an unordered list, which we will style with rounded corners. Here we will also specify the main color for our natural state. I chose #F93, which is a nice, bright orange. For rounded corners, this is an effect that we have to specify browser prefixes for separately, so it will show up across most major browsers. You can specify the number of pixels that the corners will be rounded. The higher the number, the rounder your corners will be. I chose 15px for my settings. You will notice that your CSS drop down menus will be orange as well, and will be rounded. We don’t really want that, because it breaks the menu visually, and I will show you how to fix that shortly.

.menu ul{
 background:#F93;
 height:50px;
 list-style:none;
 margin:0;
 padding:0;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
        -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 }

It is important to note that you will want to specify the class of the CSS3 menu, as well as the selector, so that you don't end up styling other menus on your site unintentionally. You could have a sidebar menu, and it would be styled differently, because you names it a different class. Beings specific is good practice for creating navigation on your site. We also created a semi-transparent inset box shadow, so that it gives the menu the look of a shine, or a highlight, adding dimension to your menu.

For our top level list items (this is the main navigation that we always see), we want to set the float to left, so that the menu shifts to the left in order to form a horizontal menu. One important thing to notice is that the left portion of your menu will not longer be round. That is because the Home button is covering this edge and it is round. To fix this, leave all of the padding set to 0px,except for the left padding. For that, we will set the padding to 15px. This gives us plenty of clearance in order to view the round portion of your top level menu bar.

.menu li{
 float:left;
 padding:0px 0px 0px 15px;
 }

Next, we will want to style the active links in our menus. These are all of the list items that are active links, which should be all of them if this is a navigational menu. I set the text color to black, which is #000, and set the display to block. The line height is 50px which is important, because you will want to keep this the same value for everything element that you set the line height for. This ensures that your menu is seamless, and that some menu items aren't smaller in height than others.

.menu li a{
 color:#000;
 display:block;
 font-weight:normal;
 line-height:50px;
 margin:0px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
 }

Next, we want to style the hover "state" for the top level of our menu. For this, I chose a darker shade of orange, #c60, in order to create visual contrast. I added a box shadow, inset, in order to give our hover state the appearance that it is pressed into the browser. This creates an illusion of depth. To create this, we have to compensate for the fact that you have to use a browser prefix for different browsers separately. They all have the same settings, you just have to specify the prefix. You use inset to tell the element to display the shadow on the inside. To have it on the outside, you simply don't put anything. The first two pixel settings determine if the shadow will be shifted to the left or right, up or down. The third and fourth numbers determine the blur or fade that it will have and how far it spreads. The deeper you make it spread, the stronger the shadow will be. The RGBa setting tells the browser what color the shadow will be, by the combination of red, green, and blue values. If you set all values to 0, then you would get the color black, and if all three values were 255, then the result would be white. The last setting, the alpha setting, determines how transparent the shadow will be. 0.1 is almost invisible, and 1 is completely solid.

.menu li a:hover{
 background:#C60;
 color:#FFFFFF;
 text-decoration:none;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 }

Next, it is time to style an active top level menu item whose list items are active, meaning the first level menu when you are not hovering over it, but hovering over a list item under it. It is active, but the submenu under it is what you are hovering over. I styled this not to have the inset shadow setting, because it isn't being hovered over, so this shows you visually what the parent menu item is, and separates it from your submenu. This is a picky detail that is usually overlooked.

.menu ul li:hover a{
 background:#C60;
 color:#FFFFFF;
 text-decoration:none;
 }

Next, we want to style unordered list items under our top menu items, so this controls the overall structure of our drop down menu. The important thing to notice here is to set your display style to none. This means that when you aren't hovering over the top level menu item, this whole section disappears. Also, you will need to set the position to absolute. This keeps your top level menu items from shifting when your drop down menu appears after you hover over it. This is important for the user experience for your visitors. Another important part to this section is setting the width. This isn't done on the top level menu, because it really doesn't matter visually, all you ever see is one continuous menu bar. The problem here is that if you don't set a width value, then each menu item will be a different width, according to the length of the link title itself. Set a width that will be long enough for every word in your submenu. Set the Z Index to 200, or something that will make it appear above other elements on the page. This keeps your menu from appearing behind other elements on the page.

.menu li ul{
 display:none;
 height:auto;
 padding:0px;
 margin:0px;
 border:0px;
 position:absolute;
 width:200px;
 z-index:200;
 }

We have to be sure to tell the unordered list items, under our menu's list items to display when you hover over the top level menu. Otherwise, when you hover over your top level menu items, their respective drop down menus won't show up at all. This is easy, but essential, just set the display property to block, so it knows to display the submenu in the first place.

.menu li:hover ul{
 display:block; 
 }

The next section is very important, because it is the section where you will get rid of those rounded corners on your drop down menu. You are styling the list items under your top level list items. This is the normal state before you hover over the submenu. When you specify a background here, the element is square, so it covers up the rounded corners of your drop down menus. Here I also specified the width, just to be cautious.

.menu li li {
 display:block;
 float:none;
 margin:0px;
 padding:0px;
 width:200px;
 background:#F93;
}

We have to specify no background for the list items when their top level menu is in its hover state. This makes sure that it has the normal appearance of the bright orange. Otherwise, it will inherit the appearance of the dark #C60 color that we chose earlier for the top level menu items, which will throw off the entire look of our menu.

.menu li:hover li a{
 background:none;
 }

Next, we have to style the active unordered list items under the list items. This means that we are controlling the menu's text color, each item's height, it's height and padding. We align the text to the left in order to give it some alignment, and so that each menu is the same width.

.menu li ul a{
 display:block;
 height:50px;
 font-size:12px;
 font-style:normal;
 margin:0px;
 padding:0px 10px 0px 15px;
 text-align:left;
 }

Now we have to control the hover state of the active unordered list items found under the list items, and the hover state of each each list item. This is easy, because we just apply the same darker orange color to the background as the top level menu, and we can also use the same box shadow styles that we created earlier, so that our menu looks consistent. You will want to set the text color to something that contrasts with the dark hover state of the menu. I chose white, because it works well here.

.menu li ul a:hover, .menu li ul li:hover a{
 border:0px;
 color:#ffffff;
 text-decoration:none;
 background:#C60;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); 
 }

I will paste all of the CSS together for your convenience:

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }
.menu ul{
 background:#F93;
 height:50px;
 list-style:none;
 margin:0;
 padding:0;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 }
 .menu li{
 float:left;
 padding:0px 0px 0px 15px; 
 }
 .menu li a{
 color:#000;
 display:block;
 font-weight:normal;
 line-height:50px;
 margin:0px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
 }
 .menu li a:hover{
 background:#C60;
 color:#FFFFFF;
 text-decoration:none;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 }
 .menu ul li:hover a{
 background:#C60;
 color:#FFFFFF;
 text-decoration:none;
 }
 .menu li ul{
 display:none;
 height:auto;
 padding:0px;
 margin:0px;
 border:0px;
 position:absolute;
 width:200px;
 z-index:200;
 }
 .menu li:hover ul{
 display:block; 
 }
 .menu li li {
 display:block;
 float:none;
 margin:0px;
 padding:0px;
 width:200px;
 background:#F93;
 /*this is where the rounded corners for the dropdown disappears*/
 }
 .menu li:hover li a{
 background:none;
 }
 .menu li ul a{
 display:block;
 height:50px;
 font-size:12px;
 font-style:normal;
 margin:0px;
 padding:0px 10px 0px 15px;
 text-align:left;
 }
 .menu li ul a:hover, .menu li ul li:hover a{
 border:0px;
 color:#ffffff;
 text-decoration:none;
 background:#C60;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); 
 }

Conclusion

We have covered a lot in this tutorial, from how to structure your menus, to styling hover states, implementing shadows and highlights, and more. A couple of things to consider when making menus such as the one show here, is to set the text decoration to none on all link text sections, so that you don't see unexpected underlining, which can run your design. Also remember to style your menu so that it is obvious where the use is within it. Make the hover state very different from the normal one. Once you create the styling for your menu once, you can implement it over and over again, making changes here and there to customize it to fit your next project. This can be a great starting point as well, and is perfectly fine, because there is no sense in reinventing the wheel.

More Tutorials