I’m in the middle of working on a new layout and design for Themes by bavotasan.com and I have been tossing around a few ideas for my main navigation menu. I don’t want anything too elaborate and I feel that jQuery would be better used elsewhere, so I decided to go with only CSS3. I plan on using rounded corners, a background gradient and a simple hover effect. All together it works quite nicely, but of course it only works on modern browsers that support CSS3 so IE users will be missing out once again.

First we need to put together a simple menu as an unordered list:

<ul id="main-navigation">
   <li class="first><a href="http://themes.bavotasan.com">Home</a></li>
   <li><a href="http://themes.bavotasan.com/category/our-themes">Themes</a></li>
   <li><a href="http://demos.bavotasan.com/">Demos</a></li>
   <li><a href="http://bavotasan.com/">Blog</a></li>

We’ll give our unordered list the ID main-navigation and our first list items the class first. You’ll see why in a second.

Next comes the CSS:

#main-navigation {
   width: 100%;
   -moz-border-radius: 8px;
   -khtml-border-radius: 8px;
   -webkit-border-radius: 8px;
   background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
   background: -moz-linear-gradient(top,  #444444,  #666666);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
   border: 1px solid #444;
   list-style: none;
   padding: 0;
   margin: 0;
   float: left;

#main-navigation li {
   float: left;
   border-right: 1px solid #777;

#main-navigation li a {
   font: 13px Georgia, "Times New Roman", Times, serif;
   letter-spacing: 1px;
   padding: 12px 20px;
   border-right: 1px solid #333;
   display: block;
   color: #fff;

The above CSS will give us a menu that looks like this:

A simple underline for the hover doesn’t quite cut it, so let’s add a cool hover effect:

#main-navigation li a:hover {
   background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
   background: -moz-linear-gradient(top,  #666666,  #444444);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');
   text-decoration: none;

Hover over a link below to see it in action.

All we did was reverse the gradient and it adds a cool effect. The only problem is that hovering over the first item gives us some strange squared corners. Fixing that requires some CSS styles for the list item with the classname first.

#main-navigation li.first a {
   -moz-border-radius: 8px 0 0 8px;
   -khtml-border-radius: 8px 0 0 8px;
   -webkit-border-radius: 8px 0 0 8px;

Now our final menu looks and functions exactly how we want it to.