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;}