Buenas tengo un problema, resulta que tengo un menu deplegable con css, tod funciona bien pero a los enlaces en A les tengo puesto un hover para que cuando pase el raton por encima cambie el color, lo malo es que como el LI donde esta alojado el A es mas ancho cuando desplazo el raton por los lados en blanco del A este no se queda del color que le tenia en el :hover.
Probe con un width, con display block y nada , alguna ayuda?
Código HTML:
<div clas class="menu">
<ul id="lista">
<li class="primero"><a href="#" style="color:#CCCCC8">¿QUIENES SOMOS?</a></li>
<li class="primero" onmouseover="ing()" onmouseout="ing2()"><a href="#" id="ingenieria" style="color:#CCCCC8">INGENIERIA</a>
<ul id="segundo" class="seg1">
<li class="li_2"><a href="#" >LICENCIAS DE APERTURA </a></li>
<li class="li_2"><a href="#">PROYECTOS INDUSTRIALES</a></li>
<li class="li_2"><a href="#">INGENIERIA ACUSTICA </a></li>
<li class="li_2"><a href="#">INGENIERIA CIVIL</a></li>
<li class="li_2"><a href="#">COORDINACION DE SyS</a></li>
<li class="li_2"><a href="#">EMERGENCIA Y SEGURIDAD</a></li>
<li class="li_2"><a href="#">PERITACIONES Y VERIFICACIONES </a></li>
</ul>
</li>
<li class="primero" onmouseover="arq()" onmouseout="arq2()" ><a href="#" id="arquitectura" style="color:#CCCCC8">ARQUITECTURA</a>
<ul id="segundo2" class="seg2">
<li class="li_2"><a href="#">EDIFICACIÓN </a></li>
<li class="li_2"><a href="#">INTERIORISMO</a></li>
<li class="li_2"><a href="#">PATOLOGÍA EN LA EDIFICACIÓN</a></li>
<li class="li_2"><a href="#">RESTAURACIÓN</a></li>
<li class="li_2"><a href="#">ELIMINACIÓN DE BARRERAS ARQ.</a></li>
</ul>
</li>
<li class="primero" onmouseover="con()" onmouseout="con2()"><a href="#" id="consultoria" style="color:#CCCCC8">CONSULTORIA</a>
<ul id="segundo3" class="seg3">
<li class="li_2"><a href="#">IMPLANTACION NORMAS ISO</a></li>
<li class="li_2"><a href="#">ASISTENCIA TÉCNICA</a></li>
<li class="li_2"><a href="#">FORMACION INTERNA A EMPRESAS</a></li>
<li class="li_2"><a href="#">SALUD E HIGIENE</a></li>
<li class="li_2"><a href="#">MEDIO AMBIENTE </a></li>
<li class="li_2"><a href="#">MARCADO CE</a></li>
</ul>
</li>
<li class="primero"><a href="#" id="trabajos" style="color:#CCCCC8"> TRABAJOS REALIZADOS</a></li>
</ul>
</div>
Código:
/* CSS Document */
/*menu*/
.menu
{
height:36px; width:810px; display:block;
}
.lista
{list-style:none; height:36px;position:relative;font-family:arial, verdana, sans-serif; position:relative;
}
.primero
{
float:left; list-style:none; font-size:14px; background-image:url(../imagenes/blank.gif); height:36px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; background-repeat:no-repeat;
}
.primero:hover
{ background-image:url(../imagenes/blank_over.gif);
}
.primero a
{
text-decoration:none;
padding-left:15px;
padding-right:16px;
margin-top:10px;
color: 000;
}
li
{
padding-top:5px; color:#000;
}
/*Lista*/
#segundo
{
visibility:hidden; list-style-type:none;margin:0;
padding:0;/*visibility:visible*/
}
#segundo2
{
list-style-type:none;
visibility:visible;
color: 000;visibility:hidden;margin:0;
padding:0; border:medium #039 solid; color:#000
}
#segundo3
{visibility:hidden; list-style-type:none;/*visibility:visible*/;margin:0;
padding:0; text-color:#000;
}
.seg1
{
position:absolute;
left: 192px;
top: 50px;
border:#06F;
border-width:thin;
background-color:#FFF;
height: 153px;
}
.seg2
{
position:absolute;
left: 321px;
top: 50px;
border:#06F;
border-width:thin;
background-color:#FFF;
height: 115px;
}
.seg3
{
position:absolute;
left: 468px;
top: 50px;
width: 285px;
height: 135px;
border:#06F;
border-width:thin;
background-color:#FFF;
margin:0;
padding:0;
color: #000
}
.links
{
color:#CCCCC8
}
.menu #lista .primero #segundo .li_2:hover {
background-color:#223A73;
}
.menu #lista .primero #segundo .li_2 a:hover {
color:#FFF;
;
}
.menu #lista .primero #segundo2 .li_2:hover {
background-color:#223A73;
}
.menu #lista .primero #segundo2 .li_2 a:hover {
color:#FFF;
}
.menu #lista .primero #segundo3 .li_2:hover {
background-color:#223A73;
}
.menu #lista .primero #segundo3 .li_2 a:hover {
color:#FFF;
}
.menu #lista .primero #segundo3 .li_2 a
{
width: 100%;
}
.menu #lista .primero #segundo .li_2 a{
color:#000;
}
.menu #lista .primero #segundo2 .li_2 a{
color:#000;
}
.menu #lista .primero #segundo3 .li_2 a{
color:#000;
}
Código:
// JavaScript Document
function ing ()
{
document.getElementById('segundo').style.visibility= "visible"
}
function ing2 ()
{
document.getElementById('segundo').style.visibility= "hidden"
}
function arq ()
{
document.getElementById('segundo2').style.visibility= "visible"
}
function arq2 ()
{
document.getElementById('segundo2').style.visibility= "hidden"
}
function con ()
{
document.getElementById('segundo3').style.visibility= "visible"
}
function con2 ()
{
document.getElementById('segundo3').style.visibility= "hidden"
}