tengo un problema con el fabuloso Internet explorer, tengo el siguiente menu con listas y CSS:
Código :
<ul id="nav"> <li id="solutions"> <div id="solutions"> <a href="index.php?actlSection=solutions" class="solutions" <?php ShowSolutionsEvents($id); ?>> <?php ShowButtonSolutions($id); ?> </a> </div> <!-- SOLUTIONS SUBSECTIONS --> <ul class="solutions"> <li><a href="index.php?actlSection=solutions#a1" title="B2C & B2B solutions" class="asub">B2C & B2B solutions</a></li> <li><a href="index.php?actlSection=solutions#a2" title="Document Management Systems (DMS)" class="asub">Document Management Systems (DMS)</a></li> <li><a href="index.php?actlSection=solutions#a3" title="Content Management Systems (CMS)" class="asub">Content Management Systems (CMS)</a></li> <li><a href="index.php?actlSection=solutions#a4" title="Customer Relantionship Management (CMR)" class="asub">Customer Relantionship Management (CMR)</a></li> <li><a href="index.php?actlSection=solutions#a5" title="Payment Gateway Integration" class="asub">Payment Gateway Integration</a></li> <li><a href="index.php?actlSection=solutions#a6" title="Product Tracking and Inventory Systems" id="last" class="asub">Product Tracking and Inventory Systems</a></li> </ul> </li> </ul>
y el siguiente CSS:
Código :
a.asub { text-decoration: none; } /* SUBSECTION LINKS STATUS GENERAL STYLES*/ a.asub:link { color: #FFFFFF; } a.asub:visited { color: #FFFFFF; } a.asub:active { color: #FFFFFF; } a.asub:hover { text-decoration: none; } a.asub{ width:100%; padding-left:5px; padding-right:5px; padding-top:5px; } a#last{ /*Last section option.*/ padding-bottom:5px; } ul#nav ul li a:hover{ /* SUBSECTIONS LINKS \\\"HOVER\\\" BACKGROUND COLOR*/ background-color:#7283A3; } /* SUBSECTION LIST STATUS SPECIFIC STYLES*/ ul.solutions{ width:270px; } /*GENERAL LISTS STYLES.*/ ul#nav{ list-style: none; margin: 0; } ul#nav{ /*MOVING MENUBAR TO THE RIGHT*/ padding-left: 8px; } ul li li a { display: block; font-weight: normal; } ul#nav li{ /* MAIN BUTTONS STYLES*/ float: left; position: relative; text-align: left; cursor: default; background-color: transparent; border:none; } li ul { display: none; position: absolute; top: 100%; left: 0; font-weight: normal; margin-top: -1px; } li>ul { top: auto; left: auto; } ul#nav ul li{ /*SUBSECTION LIST STYLES*/ /*display: block;*/ float: none; background-color: #485e88; border: 0; } ul#nav ul{ /*SUBMENU LOCATION*/ margin-left:0px; } li:hover ul, li.over ul { display: block; }
Mi problema es que si pasar el raton por encima del menu, puedes seleccionar hasta el segundo elemento, pero si pasas del tercero hacia abajo el desplegable desaparece, como si hubiera un vacio entre el 2º y 3º elemento. Con el resto de navegadores funciona correctamente.
Alguna idea?
Gracias de antemano.
Código :
Código :