submenu no se ve

[laura_moreno14]

como podeis ver en la web de mi firma hacer hover en el menu el submenu es como si quedara por debajo del contenido. Le añadi z-index pero sigue sin funcionar. Alguien puede ayudarme?

les dejo el codigo es una web con wordpress:

Código:

<nav>
<ul id="menu">

<li id="menu-item-12" class="menu-item"><a href="http://www.mas-que-ciencia.com/category/blog/">Blog</a></li>
<li id="menu-item-11" class="menu-item"><a href="http://www.mas-que-ciencia.com/category/biblioteca/">Biblioteca</a>

<ul class="sub-menu">
<li id="menu-item-293" class="menu-item"><a href="http://www.mas-que-ciencia.com/category/biblioteca/biologia-celuar/">Biología celuar</a></li>
<li id="menu-item-294" class="menu-item"><a href="http://www.mas-que-ciencia.com/category/biblioteca/bioquimica/">Bioquímica</a></li>
<li id="menu-item-292" class="menu-item"><a href="http://www.mas-que-ciencia.com/category/biblioteca/genetica/">Genética</a></li>
<li id="menu-item-295" class="menu-item"><a href="http://www.mas-que-ciencia.com/category/biblioteca/inmunologia/">Inmunología</a></li>
</ul>
</li>
<li id="menu-item-31" class="menu-item"><a href="http://www.mas-que-ciencia.com/glosario/">Glosario</a></li>
</ul>
</nav>

Código:

nav { width:100%; background:#93d22b; overflow:hidden;}
#menu { width:67%; float:left; font-size:1.2em; list-style: none;}
#menu a { color: #fff;float:left; text-decoration: none;  font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { float:left; padding: 10px 20px; position:relative;}
#menu li:hover {background:#B3EE44;}
#menu li a ul {display:none; z-index:1000; position:absolute; top:20; left:5;}
#menu li li {list-style:none;}
#menu li a:hover ul {display:block;}

[javierflti]

Este #menu li a:hover ul {display:block;}
¿no debería estar así
#menu li a:hover > ul {display:block;}
Para indicar que al pasar el ratón por encima del link aplique esa propiedad a ul.

No tengo mucha idea de hacer eso, pero creo que así funcionaría. O te podría pasar uno que tengo hecho, pero es mucho más grande el código y te liaría más.

[laura_moreno14]

no se si as mirado la pagina pero como lo tengo puesto ya le aplica la propiedad al pasar el raton. el problema es que aparece debajo del div contenido.

tengo el top solo a 20px para que sobresalga por encima asi se puede ver que esta ai el submenu pero si lo pusiera justo debajo del menu no se veria.

[javierflti]

Ahora que lo estoy probando veo otra cosa.
Estás creando el menú con id=menu
pero en el css en lugar de usar IDs, estás usando clases, tendrías que sustituir #menu por .menu

[laura_moreno14]

creo que te estas equivocando # es selector de div y . es selector de clase.

[javierflti]

Iniciado por laura_moreno14

creo que te estas equivocando # es selector de div y . es selector de clase.

Si perdona, no me he dado cuenta de eso, es que estoy probando con un editor de texto normal y no se por qué creí que ese era el problema.

[javierflti]

Con este código funciona

Código HTML:

#menu { background:#93d22b; width:100%; float:left; font-size:1.2em; list-style: none;}
#menu a { color: #fff;float:left; text-decoration: none;  font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { float:left; padding: 10px 20px; position:relative;}
#menu li:hover {background:#B3EE44;}
#menu li ul {display:none;  position:absolute; left:0;}
#menu li li {list-style:none;}
#menu li:hover > ul {display:block;}
#menu li ul {background:#B3EE44; margin-top:32px; position:absolute; border-radius:0px 0px 10px 10px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px;}

No tengo mucho tiempo, pero te digo un par de cosas que he cambiado y luego tú lo miras más a fondo.
He quitado el nav, porque cuando expandías el submenú solo bajaba hasta el tamaño del nav.
He cambiado la línea #menu li a:hover ul por #menu li:hover > ul en lugar de cuando esté encima del link cuando esté encima de li y un ">" para indicar que lo aplique sobre la propiedad ul.

[laura_moreno14]

Gracias por tu ayuda pero sigue sin funcionar, solo se ve la primera categoria.

Se agracede toda ayuda, yo mientras sigo probando..

[javierflti]

Yo en tu blog lo veo bien, lo único que le faltaría sería un border-radius por abajo para que quede perfecto.

[laura_moreno14]

Si finalmente consegui que funcionara. El codigo que me pusites no me funciono tal cual pero lo de que lo sacara del nav me diste la clave.

He tenido que reestructurarlo para sacarlo tanto del nav como del head y asi se ve perfectamente. Y como dices creo que quedara mejor con un border-radius gracias por la sugerencia y por la ayuda!

[javierflti]

Cuando le pongas el border radius avísame que lo quiero ver para ver como queda