Menu desplegable 100% CSS

[Mikmoro]

Tienes que hacer varios cambios:

1.-
#menu { text-align: center;
font-size: 0.7em;
width: 660px;
margin: 20px auto;
position: relative;}

2.-
#menu ul li a:active ul {display: block;
position: absolute;
width: 656px;
border: solid 1px #fff;
border-top: none;
background-color: #6CC;}

3.-
#menu ul li ul li a {width: 130px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}

Y en último lugar, en el caso concreto de este menú, era necesario marcar un estilo en el html para que funcionaran los "focus" de los "li".

Busca en la cabecera del html, y donde pone:

#menu ul li:focus ul, #menu ul li:active ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;}

Cámbialo por:

#menu ul li:focus ul, #menu ul li:active ul {display: block;
position: absolute;width: 656px;border: solid 1px #fff;border-top: none;background-color: #6CC;}

Mikel.