Manera correcta de hacer un desplegable

[marcvilap]

Hola compañeros, estoy realizando un menú desplegable y me encuentro un problema con ie6 y ie7. Sé que estos navegadores son anticuados pero a veces me sirven para detectar algún error de maquetación, como creo que es el caso.

Pongo aquí el HTML

<div id="desplegable_contenedor">
<div id="desplegable_flecha">
</div>
<div id="desplegable">

Todas las opciones del desplegable
</div>
</div>

y aquí el CSS

#desplegable_contenedor{
float: left;
height: 225px;
margin-left: 80px;
margin-top: 66px;
position: absolute;
width: 860px;
z-index: 100;
display:none;}

#desplegable_flecha {
background-image: url("../imagenes/flecha.png");
background-position: 131px 0;
background-repeat: no-repeat;
float: left;
height: 10px;
width: 100%;
}
#desplegable{ background-color: #333;
padding:10px;
border-radius:8px 8px 8px 8px;
float:left;
height: 189px;
width:100%;
}

Es correcto lo que hago? En ie8, ff y chrome sale OK pero en ie6 y ie7 no

Muchas gracias

[Oscar_Hidro]

Hola marcvilap, no entiendo muy bien que es lo que quieres hacer con el codigo que nos muestras por que de momento nada mas lo que aparece es una caja de texto con borde redondeados. Para hacer un menu desplegable, al menos de mi forma de parecer, es crearlo con listas anidadas.

Es valido con divs, aunque creo puede ser un poco mas complejo.

Por otro lado, el hecho de que te cause conflictos en ie6 y 7, no deberia preocuparte del todo, puesto que cada vez son menos los usuarios que siguen con este explorador. Y si tu intención es detectar errores de maquetación, se agregan lineas de comando en el css para este tipo de exploradores, dependiendo del atributo que le quieras dar a un elemento en particular.

Por citar un ejemplo, para poner una sombra css, el comando seria el siguiente:

Código CSS:

.elemento {
  box-shadow: 2px 2px 5px #999;
}
 

y si esto mismo, quisieras que se viera cualquier navegador, agregarias las siguientes lineas:

Código CSS:

.elemento {
   box-shadow: 2px 2px 5px #999;  
  -webkit-box-shadow: 2px 2px 5px #999;// Para visualizar en safari
  -moz-box-shadow: 2px 2px 5px #999;// Para vizualizar en Mozilla
   filter: shadow(color=#999999, direction=135, strength=2); // Para vizualizar en ie6 
}
 

Espero esto te oriente un poco con las dudas que tienes.