Just another CSS3 menu

Hey there, this is my first post on 2012 and today you’ll learn how to create a simple and clean CSS3 menu in just a few steps.

View demo

I know, there are so many CSS3 menu tutorials in the wild (including here on RTD) but I hope you will love this one also.

CSS3 menu tutorials

Below is a list with other CSS3 menu articles you may have read here:

The idea

The idea for this CSS3 navigation menu came to me while watching this button on UI Parade. Usually, when I see design stuff on the internet, I try to image how can I make it using CSS3. I think this a professional habit.


Check the markup below, simple and effective:

<li><a href="">Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>

Also, do not forget to include the following snippet when using HTML5 specific tags like nav:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>


The following lines do not contain the vendor-specific properties like -moz- or -webkit-. From now on, I think this is how I’ll present the CSS in my articles. Just keep in mind that you can always find the full code in the demo page source.

Step 1

To be short: reset the margin and padding for the unordered list, also center align the inline-block list elements:

Initial menu styles

width: 960px;
margin: 80px auto;
text-align: center;

nav ul{
margin: 0;
padding: 0;

Step 2

For the menu elements, instead using float I chose the inline-block alternative. If you want to find out more about inline-block pros and cons, I’d recommend Robert Nyman’s article: CSS display: inline-block: why it rocks, and why it sucks.

Inline block elements

nav li{
margin: 0 10px; /* Add some horizontal spacing */
display: inline-block;
*display: inline; /* IE7 and below */
zoom: 1;

Step 3

Using cool CSS3 properties like gradients and shadows we’re going to style the anchor elements:

CSS3 menu link styles

nav a{
display: inline-block;
position: relative;
padding: 8px 15px;
border: 2px solid #fff;
text-decoration: none;
color: #999;
font: bold 14px 'Lucida sans', Arial, Helvetica;
background-color: #eaeaea;
background-image: linear-gradient(top, #eaeaea, #fff);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0 rgba(0, 0, 0, .2),
0 2px 2px rgba(0, 0, 0, .3),
0 10px 10px -5px rgba(0, 0, 0, .2);

nav a:hover{
background-color: #eee;
background-image: linear-gradient(top, #eee, #fff);

nav a:active{
top: 1px; /* Simulate the push button effect */
background: #f5f5f5;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0px rgba(0, 0, 0, .2),
0 1px 2px rgba(0, 0, 0, .3);

Step 4

The below is the most interesting part, in my opinion. Without, adding any extra markup and using a pseudo-element you will be able to create a cool effect:

Menu pseudo element

nav a::before{
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
z-index: -1;
background-color: #e3e3e3;
background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;

nav a:active::before{
top: -11px; /* Hey you, don't move! */

That’s it!

I hope you enjoyed this article and I’m looking forward to hear your thoughts about it. Thanks for reading!