Comunidad de diseño web y desarrollo en internet online

LISTAS CSS

Citar            
MensajeEscrito el 21 May 2008 11:45 am
hola,

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 :

					

Por quimer@

1 de clabLevel



Genero:Masculino  

opera
Citar            
MensajeEscrito el 21 May 2008 01:21 pm
Ya he encontrado la solucion, habia que añadir el parámetro "height:300%;" al siguiente bloque para hacer más grande el espacio que ocupa cada elemento de la lista.

Código :

ul#nav ul li{                                                                   
   display: block;
   float: none;
   background-color: #485e88;                                              
   border: 0;
         height:300%;                                                            /*This parameter is necessary to select from third submenu option*/                                                                                 
}


gracias de todas formas

un saludo.

Por quimer@

1 de clabLevel



Genero:Masculino  

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.