Foros del Web » Creando para Internet » CSS »

super simple menu css

Estas en el tema de super simple menu css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/01/2009, 16:32
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
super simple menu css

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> 
__________________
On error no hago nada porque deje de fumar...
  #2 (permalink)  
Antiguo 31/01/2009, 17:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: super simple menu css

Supongo que deberías preguntar en el foro de javascript, ¿no?.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 31/01/2009, 17:05
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: super simple menu css

tiene dos partes, la parte css y la parte javascript.
el posicionamiento del div es con css no?
__________________
On error no hago nada porque deje de fumar...
  #4 (permalink)  
Antiguo 31/01/2009, 17:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: super simple menu css

Sí, pero tú preguntas por el comportamiento, que lo estás haciendo con javascript:
Cita:
<li onClick="Javascript:document.getElementById('submenu').st yle.display='block'">
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 31/01/2009, 17:31
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: super simple menu css

talvez deberias ponerle un poco mas de onda y leer que la duda no es especifica de javascript. gracias de todos modos
__________________
On error no hago nada porque deje de fumar...
  #6 (permalink)  
Antiguo 31/01/2009, 17:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: super simple menu css

Cita:
Iniciado por dieguicho Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 31/01/2009, 18:07
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: super simple menu css

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!
__________________
On error no hago nada porque deje de fumar...
  #8 (permalink)  
Antiguo 01/02/2009, 03:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: super simple menu css

Quizá:

div {
border: 1px solid;
position:absolute;
left: 0;
}
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 01/02/2009, 21:18
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: super simple menu css

left:0 lo deja alineado a la izquierda del browser pegado al borde.
__________________
On error no hago nada porque deje de fumar...
  #10 (permalink)  
Antiguo 01/02/2009, 22:17
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: super simple menu css

Cita:
Iniciado por dieguicho Ver Mensaje
left:0 lo deja alineado a la izquierda del browser pegado al borde.
a los li ponele position:relative
  #11 (permalink)  
Antiguo 02/02/2009, 07:19
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: super simple menu css

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
__________________
On error no hago nada porque deje de fumar...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:04.