Menú con CSS

Estructura del html

Se debe trabajar en listas como se observa en el código inferior. Se coloca clases en la etiqueta <ul> y en las etiquetas <li> para luego darle apariencia en el código Css. No olvidar añadir el enlace a los botones.

<ul class="menuLista">
<li class="pageItem"><a href="sinopsis.html">SINOPSIS</a></li>
<li class="pageItem"><a href="aragorn.html">PERSONAJES</a></li>
<li class="pageItem"><a href="fotos.html">FOTOS</a></li>
<li class="pageItem"><a href="videos.html">VIDEOS</a></li>
<li class="pageItem"><a href="curiosidades.html">CURIOSIDADES</a></li>
<li class="pageItem"><a href="contacto.html">CONTACTO</a></li>
</ul>

menu-css

Código CSS

  1.  Insertar el estilo para la clase .menuLista. Se eliminan los margenes y los guiones
    .menuLista {
    margin: 0px;
    padding: 0px;
    list-style-image: none;
    }
  2. Añadir el estilo pageItem que define la posición de cada ítem de la lista y la propiedad para flotar al lado izquierdo.
    .pageItem {
    float: left;
    }
  3. Crear el estilo para los enlaces principales. Se crea un selector compuesto .pageItem a. Es importante darle la propiedad de display:block.
    .pageItem a{
    text-decoration: none;
    font-size: 11px;
    color: #FEF1DE;
    display: block;
    text-align: center;
    height: 33px;
    width: 159px;
    padding-top: 20px;} 
  4. Visualizar el botón cuando la etiqueta <a> esta en hover.
    .pageItem a:hover {
    color: #FFFFFF;
    }