Estoy haciendo un menu con css, el menu consta de elementos principales, en los cuales si sobre ellos esta el puntero del mouse se desplegara una lista de elementos.
La imagen que voy a mostrar fue tomada desde firefox y asi es como quiero que se vea el menu (Si selecciono un elemento principal y un elemento de la lista que aparecio, quiero que el elemento principal siga seleccionado, eso si pasa en firefox)
Pero en internet explorer el elemento principal no se queda seleccionado e incluso al seleccionar un subelemento aparece un espacio de más y desacomoda los elementos:
¿Qué puedo hacer para que en IE se vea igual que en firefox?
Otra situación que sucede es que cuando selecciono un elemento principal con sublista los elementos de la derecha se recorren (pasa en ambos navegadores). Es decir si selecciono Products , contact queda casi hasta el final de la pantalla.
Aquí esta el html y el css
//HTML
<ul id="menu" >
<li class="or" ><a href="#">HOME</a></li>
<li class="or" ><a href="#">PRODUCTS</a>
<ul>
<li ><a href="#"> Availability Chart </a></li>
<li><a href="#"> Roma tomatoe </a></li>
<li><a href="#"> Cucumber </a></li>
<li><a href="#"> Onions </a></li>
<li><a href="#"> Red bellpepers </a></li>
</ul>
</li>
<li class="or" ><a href="#">ABOUT</a></li>
<li class="or"><a href="#">AGRICULTURAL</br>OPERATIONS</a></li>
<li class="or"><a href="#">FOOD</br>SAFETY</a></li>
<li class="or" ><a href="#">MAPS</br>DIRECTIONS</a></li>
<li class="or"><a href="#">CONTACT</a></li>
</ul>
//CSS
#menu *{
padding: 0px; margin:0px;
}
#menu {
padding-top: 150px;
margin-left: 330px;
}
/*Desplazar loe items principales en horizontal*/
#menu li.or{
float: left;
}
/*Quitar viñetas a todos los itesm*/
#menu li {
list-style:none;
font-family:Corbel;
}
/*desaparecer los items secundarios cuando no se deben de ver y colocarlos verticalmente*/
#menu li.or ul {
display:none;
float:none;
}
#menu li.or{
margin-right: 10px;
margin-left: 10px;
}
/* mostrar el elemento principal en amarillo*/
#menu li.or:hover {
display:block;
background-color:#fff200;
}
/*mostrar los items cuando se selecciono el elemento principal y en amarillo todos*/
#menu li.or:hover ul {
display:block;
}
/*Mostrar los itesm en amarillo , solucion IE*/
#menu li.or a:hover{
display:block;
background-color:#fff200;
color:#5E9520;
}
#menu li.or ul {
display:none;
background-color:#fff200;
}
#menu li.or ul li a:hover {
color:#5E9520;
}
#menu a {
text-decoration:none;
color:black;
}
Gracias ......
