Problema a:hover

[davidvaro]

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