Menu con submenu desplegable que no se "pincha" bien- CSS Hola,
He hecho un menu con submenu desplegable para la web: [URL="http://menendez-asesores.com"]http://menendez-asesores.com[/URL] y des desplega perfectamente, pero le encuentro un defecto al querer pinchar sobre el menu "padre" a saber sobre los botones " Documentación" y " descargas". No se pincha bien y es dificil abrir la pagina. Porque? Alguna suggestión porque funcciona la?
<div id="menu">
<ul id="menu_horizontal">
<div id="logo"><img class="image" src="server/logo_1.png" border="0px"></div>
<li><a href="menendezasesores_quien_somos.html" title="Quien somos">QUIEN SOMOS</a></li>
<li><a href="asesoria.html" title="Asesoría">ASESORÍA</a>
<ul>
<li><a href="aboral.html">LABORAL</a></li>
<li><a href="fiscal.html" title="Fiscal & contable">FISCAL & CONTABLE</a></li>
<li><a href="proteccion_datos.html">PROTECCIÓN DE DATOS</a></li>
<li><a href="juridico.html" >JURÍDICO</a></li>
</ul>
</li>
<li><a href="contact.html" >DONDE ESTAMOS</a></li>
<li><a href="documentacion.html">DOCUMENTACIÓN </a>
<ul> <li><a href="descargas.html">DESCARGAS</a></li>
</ul>
</li>
</div>
y aqui esta el CSS:
/* Menu horizontal */
ul#menu_horizontal li {
float: left;
display: inline;
position: relative;
top:15px;
z-index:80;}
ul#menu_horizontal ul {
display: none;
position: relative;
top: -10px;
left:-15px;
padding:0;
z-index:80;
}
ul#menu_horizontal ul li {
display: block !important;
}
ul#menu_horizontal li:hover ul{
display: none;
}
ul#menu_horizontal li:hover ul{
display: block;
}
#menu_horizontal {
width:750px;
margin:0 auto;
}
#menu_horizontal li {
margin:0 1px;
margin-left:10px;
width:150px;
height:15px;
text-align:left;
background:#a51984;
list-style:none;
padding-top: 5px;
padding-bottom:1px;
padding-left:15px;
z-index:80;
}
/* y otro poquito por aquí.. */
#menu_horizontal li:hover {
background-color: #7F0F6A;
}
#menu_horizontal li:active {
background-color: #7F0F6A;
}
#menu_horizontal li a {
font:10px "Helvetica",Arial,Helvetica,sans-serif;
color:#FFF;
text-decoration:none;
}
#menu_horizontal li a:hover {
font:10px "Helvetica",Arial,Helvetica,sans-serif;
color:#FFFFF;
text-decoration:none;
}
#menu_horizontal li ul li{
float:none;
width:150px;
margin:1px 0;
}
