Problema con menu en CSS y IE

[jonn59]

Hola a todos les comento que estoy realizando un menu en CSS con el cual tengo problemas, en un menu horizontal con submenu horizontal, el problema es que en IE al pasar al sub menu se pierde el foco, y desaparece el submenu, esto no pasa ni con firefox y chrome.

En la parte donde se despliega el submenu agrege un padding para separa un poco el menu del submenu, pero en IE al agregar este padding se pierde el foco del sub menu. Sin el padding funciona bien en IE. Alguien tendra alguna de idea de que es lo que pasa.

Les dejo el enlace a la pagina para que vean el comportamiento que tiene con IE, asi como el codigo CSS de este.

[URL="http://pruebasweb.site11.com/"]http://pruebasweb.site11.com/[/URL]

Código:

/*menu sup*/
body {
	background-image:url(img/gris.jpg);
	background-repeat:repeat-x;
	behavior:url("csshover.htc");
}

ul#navigation {
	list-style-type: none;
	padding: 0;
	margin: 0;
	border: 0;
	top: 0px;
	left: 0px;
	width: 600px;
	height: 25px;
	float:right;
	background: url(img/nav_overl.jpg) no-repeat;
}

a, a:link, a:visited {
	text-decoration: none;x
}

p, p a {
	color: #333;
	font: 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
}

/*<group=level 1>*/

ul#navigation li {
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	text-indent: -9999px;	
}

ul#navigation li a {
	border: 0;
	display: block;
	height: 25px;
	background: url(img/navl.jpg) no-repeat;
}

ul#navigation li a:hover {
	border: 0;
	display: block;
	background-image: url(img/nav_overl.jpg);
}	
	
/*</group>*/

/*<group=level 1 ids>*/

li#home a {
	width: 80px;
 }

li#info a {
	width: 177px;
}

li#info a:link,
li#info a:visited,
li#info a:hover {
	background-position: -80px 0px;
}

li#benif a {
	width: 159px;
}

li#benif a:link,
li#benif a:visited,
li#benif a:hover {	
	background-position: -257px 0px;
}


li#galeria a {
	width: 90px;
}

li#galeria a:link, 
li#galeria a:visited, 
li#galeria a:hover {	
	background-position: -416px 0px;
}
/*
li#contact a {
	width: 93px;
}

li#contact a:link, 
li#contact a:visited, 
li#contact a:hover {	
	background-position: -506px 0px;
}

li#register a {
	width: 69px;
}

li#register a:link,
li#register a:visited, 
li#register a:hover {	
	background-position: -331px 0px;
}

li#company a {
	width: 90px;
}

li#company a:link, 
li#company a:visited, 
li#company a:hover {
	background-position: -400px 0px;
}
*/
li#contact a {
	width: 93px;
}

li#contact a:link,
li#contact a:visited, 
li#contact a:hover {
	background-position: -506px 0px;
}
	
/*</group>*/

/*<group=level 2>*/


#navigation li ul {	
	display: block;
	visibility: hidden;
	position: absolute;
	left: 0px;
	width: 400px;
	margin: 0;
      padding:4px 0px 0px 0px;
}

#navigation li:hover ul {
	visibility: visible;
	z-index: 100;
}

#navigation li#benif ul {
	background: none;
	height: 21px;
	margin-left: 380px;
}

#navigation li#info ul {
	background: none;
	height: 21px;
	margin-left: 250px;
}


* html #navigation li#benif ul {
	margin-left: 380px;
}

* html #navigation li#info ul {
	margin-left: 250px;
}

/*</group>*/

/*<group=level 2 ids>*/

ul#navigation li#benif ul li#bene a:link, 
ul#navigation li#benif ul li#bene a:visited {
	width: 87px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat 0px 0px;
}

ul#navigation li#benif ul li#bene a:hover {
	width: 87px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat 0px -27px;
}

ul#navigation li#benif ul li#comp a:link, 
ul#navigation li#benif ul li#comp a:visited {
	width: 92px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat -87px 0px;
}

ul#navigation li#benif ul li#comp a:hover {
	width: 92px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat -87px -27px;
}

ul#navigation li#benif ul li#ref a:link,
ul#navigation li#benif ul li#ref a:visited {
	width: 86px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat -179px 0px;
}

ul#navigation li#benif ul li#ref a:hover {
	width: 86px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat -179px -27px;
}

ul#navigation li#benif ul li#histo a:link,
ul#navigation li#benif ul li#histo a:visited {
	width: 66px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat -265px 0px;
}

ul#navigation li#benif ul li#histo a:hover {
	width: 66px;
	height: 28px;
	background: url(img/info02.jpg) no-repeat -265px -27px;
}

ul#navigation li#info ul li#info a:link, 
ul#navigation li#info ul li#info a:visited {
	width: 87px;
	height: 27px;
	background: url(img/info.jpg) no-repeat 0px 0px;
}

ul#navigation li#info ul li#info a:hover {
	width: 87px;
	height: 27px;
	background: url(img/info.jpg) no-repeat 0px -28px;
}

ul#navigation li#info ul li#mision a:link, 
ul#navigation li#info ul li#mision a:visited {
	width: 54px;
	height: 27px;
	background: url(img/info.jpg) no-repeat -87px 0px;
}

ul#navigation li#info ul li#mision a:hover {
	width: 54px;
	height: 27px;
	background: url(img/info.jpg) no-repeat -87px -28px;
}

ul#navigation li#info ul li#vision a:link, 
ul#navigation li#info ul li#vision a:visited {
	width: 57px;
	height: 27px;
	background: url(img/info.jpg) no-repeat -141px 0px;
}

ul#navigation li#info ul li#vision a:hover {
	width: 57px;
	height: 27px;
	background: url(img/info.jpg) no-repeat -141px -28px;
}

ul#navigation li#info ul li#valores a:link, 
ul#navigation li#info ul li#valores a:visited {
	width: 67px;
	height: 27px;
	background: url(img/info.jpg) no-repeat -198px 0px;
}

ul#navigation li#info ul li#valores a:hover {
	width: 67px;
	
	background: url(img/info.jpg) no-repeat -198px -28px;
}

Cualquier sugerencia es de gran ayuda.

Saludos

[ipraetoriux]

Estimado he visto que con IE 7 funciona bien pero no con IE 8, lo que te conviene hacer es agregar la siguiente metaetiqueta en el head del documento

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

Esta metaetiqueta le dice a IE8 que actue (emule) como IE 7

Espero haberte ayudado

saludos

[jonn59]

ipraetoriux antes que nada muchísimas gracias por tu pronta respuesta.

Respecto a la sugerencia que me has echo que me di a la tarea de revisar la pagina en IE7 pero desafortunadamente el problema sigue siendo el mismo, se pierde e foco del submenu, a pesar de que en ocasiones se logra acceder a el, la mayoría de las veces el foco se pierde, no logro comprender que efecto tiene el padding sobre el IE ya que si este lo elimino del código, puedo acceder al submenu sin ningún problema, desafortunadamente necesito hacer uso del padding para dar una pequeña distancia entre el menu y el submenu.

De cualquier forma muchas gracias.


Saludos desde México