Create An Apple Style Menu In CSS3 – Without Images

First, we’re just going to start off by creating a simple horizontal list with links that have padding and text effects. Also make sure to add the class active to our index link.
HTML
<div id="menu"> <ul> <li><a class="active" href="index.html">home</a></li> <li><a href="menu.html">menu</a></li> <li><a href="project.html">projects</a></li> <li><a href="affiliates.html">affiliates</a></li> <li><a href="contact.html">contact</a></li> </ul> </div>
CSS
body {
background: #ddd;
margin: 30px;v
}
#menu {
float: left;
padding: 0;
margin: 0;
}
#menu ul {
padding: 0;
margin: 0;
float: left;
}
#menu li {
float: left;
list-style: none;
background: none;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
color: #262626;
text-decoration: none;
text-transform: capitalize;
padding: 12px 28px;
}

In the next step, we’re going to add our gradient effect to our links and also add a text shadow for an embedded look.
To do this, we use the following code to encompass Firefox, Safari and what ever other browser that supports css3.
#menu li a:link, #menu li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
color: #262626;
padding: 12px 28px;
text-decoration: none;
text-transform: capitalize;
/* CSS3 Text Shadow */
text-shadow: 0px 1px 1px #fff;
/* CSS3 Background Gradient */
background-image: -moz-linear-gradient(top, #cacaca, #848484);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}

Now we’re going to add another new CSS3 attribute called border radius which rounds out the corners of our links on each end of the side. We do this by also using the first-child and last-child.
#menu li:first-child a {
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a {
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
We’ll now add some final touches to our first part of the menu, some more shadowing and horizontal border gradients.
On the menu div, we’re going to add a box shadow and round out the corners so it matches our links.
#menu {
float: left;
padding: 0;
margin: 0;
/* Box Shadow */
box-shadow: 0 1px 0 #000;
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
Now we’re going to add a 1px margin to the right of our li to create a space so the background of our ul will show through.
#menu li { float: left;
list-style: none;
background: none;
margin-right: 1px;
}
Now add the gradient to the ul background.
#menu ul {
border-top: #f3f3f3 1px solid;
padding: 0;
margin: 0;
float: left;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}

Now we’ve got to add our hover event and our active state. Pretty simple, same code just different selector.
#menu li a:hover {
cursor: pointer;
color: #fff;
text-shadow: 0px -1px 1px #000;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #929292, #545454);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}

And for the active state..

a.active:link, a.active:active, a.active:visited {
color: #fff !important;
text-shadow: 0px -1px 1px #000!important;
background-image: -moz-linear-gradient(top, #444, #666)!important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
/* Box Shadow */
box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
}
Note for the active state to work, for each page you have the menu you on say contact.html you need to attach the class active to the proper link in the menu bar.

Final Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Apple Menu In CSS3 Only</title><style type="text/css">body { background: #ddd; margin: 30px; } #menu { float: left; padding: 0; margin: 0; /* Box Shadow */ box-shadow: 0 1px 0 #000; -moz-box-shadow: 0 1px 0 #000; -webkit-box-shadow: 0 1px 0 #000; /* Rounded Corners */ -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; /* Rounded Corners */ -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; } #menu ul { border-top: #f3f3f3 1px solid; padding: 0; margin: 0; float: left; /* Background Gradient */ background-image: -moz-linear-gradient(top, #b4b4b4, #707070); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070)); } #menu li { float: left; list-style: none; background: none; margin-right: 1px; } #menu a { outline: none; } #menu li a:link, #menu li a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; display: block; color: #262626; padding: 12px 28px; text-decoration: none; text-transform: capitalize; /* CSS3 Text Shadow */ text-shadow: 0px 1px 1px #fff; /* CSS3 Background Gradient */ background-image: -moz-linear-gradient(top, #cacaca, #848484); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484)); } #menu li a:hover { cursor: pointer; color: #fff; text-shadow: 0px -1px 1px #000; /* Background Gradient */ background-image: -moz-linear-gradient(top, #929292, #545454); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454)); } #menu li:first-child a, #menu ul { /* Rounded Corners */ -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; } #menu li:last-child a, #menu ul { /* Rounded Corners */ -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; } a.active:link, a.active:active, a.active:visited { color: #fff !important; text-shadow: 0px -1px 1px #000!important; background-image: -moz-linear-gradient(top, #444, #666)!important; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important; /* Box Shadow */ box-shadow: inset 0 0 10px #000; -moz-box-shadow: inset 0 0 10px #000; -webkit-box-shadow: inset 0 0 10px #000; } </style></head><body> <div id="menu"> <ul> <li><a class="active" href="index.html">home</a></li> <li><a href="menu.html">menu</a></li> <li><a href="project.html">projects</a></li> <li><a href="affiliates.html">affiliates</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> </body></html>

Final Result