mostrar / ocultar menu css

[dieguicho]

estimados,
tengo este menu simple armado con css,
lo que quiero ahora es mostrar el submenu cuando me posiciono sobre <li>opcion3</li>

funcionar, funciona pero cuando me salgo de encima se oculta, la idea seria que se mantenga visible si estoy sobre el <li> o sobre el submenu. les dejo el codigo a ver que les parece

Código HTML:

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

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

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

[dART]

Hola,

Entonces, ¿por qué no colocas el onmouseover y el onmouseout sobre <li> o sobre el submenú al que te refieres?

[dieguicho]

asi esta.. pero funciona mal.

[dART]

Hola,

Es cierto, perdona. Aparte tienes mal la sintáxis. Falta una comilla y eso da errores. Pero aún así, sigue sin hacer lo que tú quieres. Prueba así, a ver si te refieres a ésto:

Código HTML:

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

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

-->
</style>

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

[dieguicho]

no me funciona para nada... a vos si?

[dART]

Hola,

Me funciona pero no en todos los navegadores. ¿Por qué no lo haces con JQuery?

[dieguicho]

tienes un ejemplo? tambien uso prototype, vere si aparece algo.

[dART]

Hola,

Te hago un ejemplo y te lo subo en unas horas!

Saludos.

[dieguicho]

capo! lo espero!

[locoxchacho]

buenas.. con jquery hice algo parecido, pero solo se va si mantenes si apretas en otro menu del link... fijate en esta pagina, los submenues que se abren son los de portfolio, y dentro de ese... impresos...

http://www.proyectoshuerto.com.ar/nu...dad/index.html

Avisame si te sirve, que te explico que hice si no entendes el codigo. Si solo queres que se quede mientras estas en el, entonces, no te puedo ayudar!

saludos!

[dART]

Hola,

Perdona, ando liado y se me pasó. Ahí te pongo ruta de algo que hice, a ver si nos acercamos a lo que quieres:

http://www.d-art.es/fdw/demo.html

[SPAWN3000]

Bueno, aun veo gente con problemas de menú....

Por que no usar un menú con javascript:
- Si el navegador del cliente no tiene habilitado el javascript, o no mantiene una versión actualizada, o no es compatible con el navegador...

Entonces tu cliente no podrá llegar a ningún lado:
- Por ello algunos de los expertos, notando este problema... Implementaron algo para dar solución. Una de esas mejores soluciones y muy conocida en este foro es la de Mikemoro. Todo Solucionado para IE con Tabla falsas...Una tecnica igualmente conocida entre los desarrolladores CSS.

Si deseas un menú persistente:
http://www.araudi.net/forosdelweb/me...plegable6.html
Una variación:
http://www.araudi.net/forosdelweb/me...egable8-1.html
Otra más:
http://www.araudi.net/Desplegables/m...legable12.html
Y por si hace falta:
http://www.araudi.net/forosdelweb/me..._4niveles.html

- Realmente existe de todo...

Listo, una vez se tiene la base...y sabemos que no tenemos problemas de compatibilidad.

Podemos aplicar efectos de Javascript, sobre lo que tenemos...Pero!, sin perder la básica funcionalidad del CSS, así en caso de que javascript no funcione, No importa! Por que estamos respaldados por CSS.

Que tal!

También existen muchas cosas mas que podemos hacer con CSS y otras no... pero siempre se debe tener en cuenta la compatibilidad. Tener a mano un navegador instalado Firefox+Firebug(Ver errores)+web developer+Yslow(rendimiento)+Unos cuatro navegadores portables(IE6,7,8) o IETester, Opera(portable)+Safari(portable)+...Tambien existe un tester de flash para firefox y una pesataña en donde podemos agregar Iexplorer para mas comodidad(IE TAB). Recordar que solo existen cuatro(IE, Firefox,Opera y de linux que no recuerdo) y un montón de variaciones basadas en estos. Tambien existe una Libreria Java (utilizada inicialmente por yahoo). que ayuda a comprimir tu código javascript...Hoy en día la utilizan mootols, prototype, Rico...y casi todas.

Para que sirve firebug: Probar tu web a distintas resoluciones, deshabilitar la cache del navegador+Comprobar errores en la web+y mucho mas...

Espero sea útil la información, y ayude esto a mejorar sus desarrollos!

Un saludo desde colombia!