Vou só passar o código para ficar rápido e não tanto cansativo, já as duvidas e perguntas responderei, basta comentar no tópico.

Código do CSS:

Código:

#menu-horizontal {
position:relative;
background: url('http://4.bp.blogspot.com/-28M1OWdZN8c/UOa5JYpwZAI/AAAAAAAACJA/PIXIRiyBihs/s1600/menuhorizontal.jpg') no-repeat center top;
width:950px;
height:43px;
margin-top:0px;
}
#menu-horizontal ul {
padding:7px;
margin:0px;
float: left;
width: 100%;
list-style:none;
}
#menu-horizontal ul li {
display: inline;
}
#menu-horizontal li {
display: inline;
list-style: none;
}
#menu-horizontal ul li a {
background: #2a2a2a;
box-shadow: #000000 0px 0px 5px;
height: 35px;
color:#eeeeee;
font-size:16px;
padding-top:5px;
padding: 8px 5px;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menu-horizontal ul li a:hover {
background:#434343;
padding-top:10px;
font-size:16px;
padding: 15px 10px;
opacity:0.7;
color:#eeeeee;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menu-horizontal ul li a:active {
background:#434343;
padding-top:10px;
font-size:16px;
padding: 15px 10px;
opacity:0.7;
color:#eeeeee;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

Código do HTML:

Código:

<nav id='menu-horizontal'>
<ul>
<li><a href='/'>home</a></li>
<li><a href='#'>parceria</a></li>
<li><a href='#'>contato</a></li>
<li><a href='#'>equipe</a></li>
</ul>
</nav>

Demonstração: csprojectbrasil.blogspot.com

Obs: eu usei HTML5 e CSS3 para fazer os códigos.