super simple menu css

[dieguicho]

hola a todos!
tengo un simple menu hecho con <ul> y <li> y en uno de los <li> quiero mostrar un submenu emergente. bastante simple parece pero.. a la hora de mostrarlo ocultarlo el submenu no se ubica debajo del que se corresponde y me gustaria cerrarlo al sacar el mouse pero no se donde debo colocar el comportamiento, alguna idea?

estilos...

Código HTML:

<style type="text/css">
<!--
li {
	display: inline;
	background-color:#EEEEEE;
	cursor:pointer;
	padding:6px;
}

div {
	border: 1px solid;
	position:absolute;
	display:none
}
-->
</style> 

html...

Código HTML:

<ul>
	<li>opcion 1</li>
	<li>opcion 2</li>
	<li onClick="Javascript:document.getElementById('submenu').style.display='block'">opcion 3
		<div id="submenu">este es el submenu para opcion 3</div>
	</li>
	<li>opcion 4</li>
</ul> 

[Mikmoro]

Supongo que deberías preguntar en el foro de javascript, ¿no?.

[dieguicho]

tiene dos partes, la parte css y la parte javascript.
el posicionamiento del div es con css no?

[Mikmoro]

Sí, pero tú preguntas por el comportamiento, que lo estás haciendo con javascript:

<li onClick="Javascript:document.getElementById('submenu').st yle.display='block'">

[dieguicho]

talvez deberias ponerle un poco mas de onda y leer que la duda no es especifica de javascript. gracias de todos modos

[Mikmoro]

Iniciado por dieguicho

me gustaria cerrarlo al sacar el mouse pero no se donde debo colocar el comportamiento, alguna idea?

Bueno, a esto es a lo que he respondido.

¿Cómo te va a responder alguien cómo resolver con CSS ocultar un submenú a quitar el ratón, que has mostrado con javascript?.

En fin, eso es lo que yo he entendido. Quizá alguien lo entienda mejor y te pueda ayudar.

[dieguicho]

Ok Mikmoro, disculpe si me explique mal.

aclaro mi pregunta para evitar confusiones y elimino la parte de javascript.

necesito ubicar el submenu con ESTILOS CSS debajo del <li> opcion 3
en firefox se ve bien alineado izquierda y abajo pero en internet explorer lo deja al final de la palabra

la parte css

Código HTML:

<style type="text/css">
<!--
li {
	display: inline;
	background-color:#EEEEEE;
	cursor:pointer;
	padding:6px;
}

div {
	border: 1px solid;
	position:absolute;
}
-->
</style> 

y el html...

Código HTML:

<ul>
	<li>opcion 1</li>
	<li>opcion 2</li>
	<li>opcion 3
		<div id="submenu">este es el submenu para opcion 3</div>
	</li>
	<li>opcion 4</li>
</ul> 

gracias!

[Mikmoro]

Quizá:

div {
border: 1px solid;
position:absolute;
left: 0;
}

[dieguicho]

left:0 lo deja alineado a la izquierda del browser pegado al borde.

[webosiris]

Iniciado por dieguicho

left:0 lo deja alineado a la izquierda del browser pegado al borde.

a los li ponele position:relative

[dieguicho]

eso funcionó perfectamente. gracias a ambos.
lo dejo alineado a la izquierda, pero está pissando el li opcion 3
lo solucione poniendole top:25, es la forma correcta?
gracias nuevamente