domingo, 7 de septiembre de 2014

CSS: Menú horizontal con cambio de color

 Este es un menú que hace tiempo intentaba conseguir sólo usando CSS.

El siguiente es el código: 

<html>
  <head>
    <style type="text/css">
      #menu li {
        display: inline;
      }
      #menu li a {
        font-family: Arial;
        font-size:12px;
        text-decoration: none;
        float:left;
        padding: 10px;
        background-color: #5FBF71;
        color: gold;
        border-width: 2px;
        border-color: #204026;
        border-style: solid;
        border-right-style: none;
      }
      #menu li.fin a {
        border-width: 2px;
        border-color: #204026;
        border-right-style: solid;
      }
      #menu li a:hover {
        background-color: #3F7F4C;
      }

 </style>
  </head>
  <body>
    <br />
      <ul id="menu">
        <li><a href="#">Enlace 1</a></li>
        <li><a href="#">Enlace 2</a></li>
        <li class="fin"><a href="#">Enlace 3</a></li>
      </ul>
    <br />
  </body>
</html>

Y este es el resultado






-
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)