Esse menu é com um degradê que permite que o menu fique mais bonito que o normal. Ele ficará como no exemplo abaixo:

Primeiramente, insira o seguinte código no seu css:
#menu {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url("http://img380.imageshack.us/img380/6084/tabrighthfg7.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url("http://img380.imageshack.us/img380/6084/tabrighthfg7.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#menu a span {float:none;}
#menu a:hover span {
color:#FFF;
}
#menu a:hover {
background-position:0% -42px;
}
#menu a:hover span {
background-position:100% -42px;
}
E onde você quer que ele apareça, coloque:
<ul>
<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
</ul></div>
Com o tempo, você mesmo pode ir criando suas imagens e fazer seu menu personalizado! Espero que tenha sido útil!











Jon McL - Indiana