If CSS validation is not a problem for you because you know that validation is useful to check syntax errors only, then you can use some vendor extensions that implement the brand new features of CSS3 related to gradients. To start with, here's a basic markup structure of a navigation menu:
<ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contacts</a></li> </ul>
And here are our CSS styles:
#navigation {
padding: 2em 0;
margin: 0 auto;
width: 660px;
list-style: none;
height: 100%;
font: bold 2em Arial, sans-serif;
overflow: hidden;
}
#navigation li {
float: left;
width: 200px;
height: 80px;
margin-right: 10px;
}
#navigation a {
float: left;
width: 200px;
height: 80px;
background: -webkit-gradient(linear, left top, left bottom, from(#f90), to(#c40));
background: -moz-linear-gradient(50% 100%, #f90, #c40);
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 10px;
border: 3px solid #a40;
line-height: 80px;
}
#navigation a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#c40), to(#f90));
background: -moz-linear-gradient(50% 100%, #c40, #f90);
}
Since this is only an example, I've omitted the fallback declaration before each gradient statement, but you should always specify a background color before using gradients. The declaration for Firefox accepts only two values for specifying the position and direction of the gradient. In this case, 50% 100% tells Firefox to draw the gradient by starting from the center of the element to its bottom. You can see a demo below.