Para crear un menú horizontal en CSS parece que fuera muy difícil y realmente no sabemos como lograrlo. Con esta pequeña guía les voy a decir como construirlo y sobre todo entender que es lo que están haciendo.

1. Vamos a crear un <div>

<div id=menu-horizontal></div>

2. Dentro de este <div> vamos a crear la lista del menú con los comandos <ul> y <li>

<div id=menu-horizontal>
   <ul>
       <li> MENU 1 </li>
       <li> MENU 2 </li>
       <li> MENU 3 </li>
       <li> MENU 4 </li>
   </ul>
</div>

3. Ahora vamos a crear un CSS en donde se va a crear toda la mágia.

#menuhoriz ul li {
   display:inline; /* AQUI DEJAMOS LA LISTA HORIZONTAL */
   padding:2px 7px; /* AQUI SEPARAMOS EL TEXTO */
   margin:5px; /* AQUI SEPARAMOS LOS BOTONES */
   background-color:#666; /* COLOR DE FONDO */
}
#menuhoriz ul li:hover {
   background-color:#CCC; /* COLOR DE FONDO*/
}

Ahora ya pueden aplicar esto en su HTML y empezar a jugar con los efectos en JQuery o simplemente con un CLASS dentro del comando.

Hasta la próxima!