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