CSS ejemplo de página 4

El código CSS que transforma nuestra lista en un menú desplegable es el siguiente.

Código CSS.

@charset "utf-8";

/* CSS Document */

*{ margin: 0; padding: 0;}

ul { list-style: none;}

ul li a { background-color: #0c9ba0;

color: #fff;

display:block;

padding: 1px 2px;

border: 1px solid #fff;

text-decoration:none;

font-family:Verdana, Geneva, sans-serif; font-size:9px;

width: 100px;

height:50px;}

ul li a:hover { color: #0fbfc6;}

ul li {float:left;}

ul li ul li {float:none; position:relative;}

ul li ul { display:none;}

ul li:hover > ul {display:block;}

ul li ul li ul {position:absolute; top: 0; left:102px;}

body { width:2200px;}

El resultado muestra un estilo sin ningún criterio es simplemente un ejemplo ya lo modificare más adelante para que se adapte mejor a la página.

Espero que les guste.