Menu hover horizontal

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial pra vocês! E no tutorial de hoje irei ensinar como fazer um menu hover horizontal... veja na demonstração.

Demonstração


 Acesse a página de editar o HTML e busque por:

]]></b:skin>

 Acima desta linha coloque o seguinte CSS:

.menuh{
  font-family:Arial;/* --Fonte--*/
  font-weight:bold;/* --negrito--*/
  color:#111;/* --cor dos separadores--*/
  text-shadow:#444 0px 1px 0px;/* --sombra dos separadores--*/
  font-size:21px;/* --tamanho da fonte--*/
  margin:0 0 0 0;/* --posicionamento do menu--*/
 }
.menuh a{
  background:url()repeat-x scroll 0 0 transparent;
  padding:0px 4px 0px 4px;/* --distância dos links em relação à imagem de fundo--*/
  border-radius:10px;/* --inclinação das bordas do menu--*/
  font-family:Arial;/* --fonte--*/
  font-weight:bold;/* --negrito--*/
  color:#fff;/* --cor dos links--*/
  text-shadow:#000 0px 1px 0px;/* --sombra dos links--*/
  font-size:21px;/* --tamanho da fonte--*/
  opacity:0.4;/* --nível de transparência--*/
 }
.menuh a:hover{
  background:url(http://i.imgur.com/QYp6r.png)repeat-x scroll 0 0 transparent;
  padding:0px 4px 0px 4px;/* --distância dos links em relação à imagem de fundo--*/
  border-radius:10px;/* --inclinação das bordas do menu--*/
  font-family:Arial;/* --fonte--*/
  font-weight:bold;/* --negrito--*/
  color:#fff;/* --cor dos links--*/
  text-shadow:#000 0px 1px 0px;/* --sombra dos links--*/
  font-size:21px;/* --tamanho da fonte--*/
  opacity:1;/* --nível de transparência--*/
 }

Estudando o código:

 Eu nomeei o estilo como "menuh". Na parte ".menuh{" é onde definimos as características dos separadores do menu.
 Na parte  ".menuh a{" é onde definimos as características dos links do menu antes de passar o cursor do mouse.
 Na parte ".menuh a:hover{" é onde definimos as características do menu ao passar o cursor do mouse.
 Agora algumas curiosidades sobre este menu.. eu utilizei uma imagem apenas na parte hover do menu, ou seja, só quando passa o cursor do mouse sobre ele que a imagem aparece, você pode trocá-la.

Usando o menu

 Bom, agora o código para se usá-lo:

<div class='menuh'><a href='Link'>EDITE</a> | <a href='Link'>EDITE</a></div>

 Este código deve ser inserido num gadget ou nos seguintes lugares:
 Acima do cabeçalho:
<div id='header-wrapper'>

 Abaixo ou no cabeçalho:
<div id='content-wrapper'>