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:
Ver original.elemento {
box-shadow: 2px 2px 5px #999;
}
y si esto mismo, quisieras que se viera cualquier navegador, agregarias las siguientes lineas:
Código CSS:
Ver original.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.
