Duda con menú "desplegable"

[elijo_otro]

Buenas, pues os cuento, he intentado poner un menu desplegable en mi web, pero me pasan dos cosas:

a) Con el IE viejete, que no es compatible con el menu, se me descuadra todo, ya que lo toma como un menu fijo y se sale de los margenes marcados en el css, ¿como puedo solucionar esto?
b) He tenido que poner que se despliege hacia abajo, porque si lo pongo hacia la derecha solo puedo acceder al primer sub-menu, ya que al acceder al segundo, ya no estoy a la altura del elemento del menu principal, y se vuelve a plegar. Ademas, hace un efecto raro cuando tienes algún submenu desplegado, ya que al intentar acceder a otro elemento del menu principal, pues al plegarse, se despliega y tienes el puntero en otro sitio.

No se si me explico muy bien, este es el código que tengo en el css.

Código:

ul.menu
{
	position:relative;
	top: 160px;
	right: 35px;
	list-style:none;
	float:left;
}
ul.menu li
{
   position:relative;
   width:93px;
   float:left;
}
ul.menu ul
{
   position:relative; 
   right:35px;
   top:0px;
   display:none;
   list-style:none;
}
ul.menu li:hover > ul
{
   display:block;
}

Gracias de antemano, un saludo.

[XLogus]

Hola
No te recomiendo usar menus que sean puro CSS porque IE siempre tiende a mostrar cualquier otra cosa, pero eso se arregla con un poco de ajax, dale una ojeada a este menu dropdown facil de implementar

[elijo_otro]

gracias, voy a echarle un vistazo! ;)

[Mikmoro]

Iniciado por XLogus

No te recomiendo usar menus que sean puro CSS porque IE siempre tiende a mostrar cualquier otra cosa

Bueno, no lo creas; se trata de hacerlos con ciudado

También puedes ver toda la colección hasta la fecha.

[elijo_otro]

He probado el nuevo menu, y me pasa lo mismo, al ponerme sobre el elemento, sale el submenu, pero al dirigir el puntero hacia algún elemento del submenu, como ya no estoy sobre el elemento del menu principal, pues desaparece el submenu. ¿eso como se arregla?

salu2.

[elijo_otro]

Joder, también he probado lo que me has comentado Mikmoro, y en IE sigue petando!! No se ya que hacer...JUU

[elijo_otro]

ya casi lo teno!! =)

[Mikmoro]

Iniciado por elijo_otro

Joder, también he probado lo que me has comentado Mikmoro, y en IE sigue petando!! No se ya que hacer...JUU

No sé muy bien que quieres decir, pero te garantizo que el menú del primer enlace que he puesto funciona perfectamente bien en IE.
Sigue el enlace con IE y me dices.

[elijo_otro]

Hola, pues lo que me refiero, es en las versiones antiguas de IE, que no reconocen los comandos usados para expandir el menu y eso, y lo toma como algo fijo, y me descuadra la página. He leído algo sobre eso en internet, y al parecer, en esos exploradores se usa javascript para solucionarlo.

De todas formas, ya lo he adaptado a mi web, la duda ahora es, con lo bonito que me sale en firefox...¿porque salen los botones del menú tan feos en IE? Ahora ya hablamos de IE moderno, donde no se descuadra ni nada, pero se ven muy feos! xD

Un saludo, y mil gracias.

[Mikmoro]

¿A qué versiones antiguas de IE te refieres? ¿Tienes alguna para comprobarlo?

[elijo_otro]

pues, en IE 6.0.2900.2180... que es la que tengo en la maquina virtual no va, se me descuadra. El ejemplo que pusiste si que va, pero claro, solo esta el menu en la web, a mi como me "pisa" en el caja de la derecha, pues hace que se descuadre todo. No se ya como arreglarlo...mi única esperanza es que nadie use una versión tan antigua! xD

Un saludo.

[Mikmoro]

Podrías tener otra esperanza: aplicarlo adecuadamente a tu web.
Tal y como me imaginaba hablabas de IE6, y sí, con IE6 el menú funciona perfectamente. Otra cosa es que al intentar aplicarlo a tu web te produzca problemas porque hay que hacerlo muy cuidadosamente, pero eso no quiere decir que no se pueda hacer.
No se parece mucho "no funciona en IE6" a "no consigo que funcione bien cuando lo aplico a mi web".

Pero en fin, no te quiero convencer de nada, sólo quería aclarar que funciona bien en IE6 (que para eso me lo curro )

Quizá te resulte mejor aplicar el de JQuery que te ha recomendado XLogus

[elijo_otro]

jejeje no hombre, yo decía eso, porque lo había leido en otra web. Yo soy el primero que me gustaría ponerlo adecuadamente, lo único, que no se por donde empezar...Si me dieras alguna pista de que tengo mal, y como arreglarlo, te lo agradecería.

Un saludo.

[elijo_otro]

A ver, aqui te muestro lo que (creo) hace que falle y se descuadre, lo rojo:



Lo consigo arreglar, poniendole el weight a 0 en elemento menu y reduciendo el submenu, pero entonces, cuando desplazo el puntero hacia la derecha para acceder a los submenus, pues ya no estoy sobre el elemento del menu principal, y por tanto el submenu desaparece.

Un saludo.

[elijo_otro]

vale, ya lo he consegido, aunque no me gusta mucho el resultado...xD Me explico, antes lo tenía de modo que los submenu aparecían a la altura del borde de la caja del contenido, y si ahora hago que coincida, pues me pasa eso que digo de que desaparece el submenu, para que no desaparezca, tengo que poner el submenu seguido al menu, y si pongo el menu pegando a la derecha...se vuelve a descuadrar!! jajaja madre mia! xD

Un saludo.

EDITO: vaya hombre, he cantado victoria demasiado pronto...¿porque en IE 6 no se despliegan los submenus? Al menos ya he conseguido que no se descuadre =)

[XLogus]

jajaajajaaj Mikmoro la cuestion es hacerselo facil al usuario, usar un menu CSS que requiere ser insertado con pinzas y bisturí y falla con el mas minimo cambio no es buena idea.

Mejor usa javascript, en la página que te pasé hay un ejemplo para descargar y que puede alterar los estilos a tu gusto.
OJO: y esto es muy importante para evitar que se descuadren los submenus, al inicio de los estilos de tu pagina resetea los estilos usando:

Código:

*{
padding:0px;
margin:0px;
}

[Mikmoro]

Iniciado por XLogus

jajaajajaaj Mikmoro la cuestion es hacerselo facil al usuario, usar un menu CSS que requiere ser insertado con pinzas y bisturí y falla con el mas minimo cambio no es buena idea.

¿Qué te hace pensar que requiere ser insertado con pinzas y bisturí, o que falla con el más mínimo cambio? ¿que un usuario inexperto no supo adaptarlo?

Por otro lado: ¿qué te hace pensar que el javascript será menos delicado de adaptar o menos sensible a errores con los cambios? porque en javascript, con que cambies un punto y coma de sitio adiós.

Je. je, estaría bueno que por ayudar tuviéramos que intentar diseñar un código tan, pero tan robusto, que aunque cambiarás algo vital todo siguiera funcionando perfectamente, o aunque lo insertaras rematadamente mal en tu código, todo funcionara bien por arte de magia.

Lamentablemente ese código todavía no existe, aunque si lo creas no olvides comunicármelo, bueno, a mi y a todos

P.D.: si hubiera algo que ganar en una apuesta, te mostraría cómo hcer 10 menús distintos con ese CSS como base en 30 minutos, o cómo adaptarlo a 10 páginas direferentes sin problema (bueno, de hecho no hay que adaptarlo, está completamente aislado en su propia caja, con pocas posibilidades de que casi nada interfiera sobre él)

P.D. 2: vamos a ver las pocas dificultades que presenta adaptar ese menú con javascript

[Mikmoro]

Iniciado por XLogus

OJO: y esto es muy importante para evitar que se descuadren los submenus, al inicio de los estilos de tu pagina resetea los estilos usando:[

[elijo_otro]

siento interrumpir el debate, pero...¿alguien me puede explicar porque en IE6 no se me despliegan? Aunque ya he conseguido que no se descuadre, que algo es algo!! =)

Gracias por vuestra ayuda, no se que haría sin vosotros...xD!! Un abrazo.

[Mikmoro]

No, el hilo era tuyo.

¿No se despliega el qué? yo no veo nada.

[elijo_otro]

Pues, en IE6, cuando estas sobre el menú catalogo, o conócenos, debería salir un submenú, y no sale...mientras que en los demás exploradores si que me salen, y bastante bien!! =)

[Mikmoro]

Me refiero a que no veo tu código, que no sé sobre qué código lo estás intentando. ¿Sobre el enlace del primer post?

[elijo_otro]

Pues, en la página, el código que uso es este:

#menu {

margin-top:140px;
margin-left:-3px;
text-align:left;
width:0px;

}
#menu ul {
list-style-type:none;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}
#menu ul li.nivel1 {
width:95px;
}
#menu ul li.primera {
border-top:1px solid #ABA8A8;
}
#menu ul li a {
background-color:#8E8E8E;
border-color:-moz-use-text-color #ABA8A8 #ABA8A8;
border-style:none solid solid;
border-width:medium 1px 1px;
color:#FFFFFF;
display:block;
padding:8px;
position:relative;
text-decoration:none;
}
#menu ul li:hover {
background-color:#66CCCC;
color:#000000;
position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color:#C7C7C7;
color:#E25003;
position:relative;
}
#menu ul li a.nivel1 {
display:block !important;
position:relative;
}
#menu ul li ul {
display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display:block;
left:104px;
position:absolute;
top:-1px !important;
margin-left:-10px;
}
#menu ul li ul li a {
background-color:#C7C7C7;
color:#000000;
width:160px;
}
#menu ul li ul li a:hover {
background-color:#8E8E8E;
color:#FFFFFF;
position:relative;
}
table.falsa {
border:0 none;
border-collapse:collapse;
float:left;
position:relative;
}

La verdad que voy a empezar a odiar a IE...xD Mira lo que me ha comentado un amigo que le aparece en su IE8:




Un saludo.

[elijo_otro]

puede ser problema de utilizar la beta de windows 7?? o es porque en IE8 va mal y ya esta.

salu2.

[Mikmoro]

No has copiado el HMTL como está en el original del menú y por eso falla en IE6. Mira bien y busca la diferencia.

[elijo_otro]

pues, que yo sepa, lo único que he cambiado ha sido que esto:

* {
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}

En lugar de aplicarlo a todo el css (se liaba la de dios), lo he puesto aqui:

#menu ul {
list-style-type:none;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}

¿ese es el motivo?

Un saludo.

[Mikmoro]

No, no he hablado del código CSS, sino del HTML. Has eliminado todos los comentarios condicionales, y son imprescindibles para que funcione en IE6.

Sigo pensando que quizá deberías intentar la alternativa de XLogus con javascript.

[XLogus]

Ya sabes Mikel lo que pienso al respecto

[elijo_otro]

ah vale vale, es que no copié el código tal cual, solo me fijé en el css de la página asi que no sabía ni que existían esos comentarios condicionales! ^^. Ya que he empezado con esto, me gustaría aprenderlo =)

Un saludo.

[elijo_otro]

Por cierto, muchas gracias por vuestra ayuda, se que soy un poquillo pesao y bastante torpe, pero es que estoy aprendiendo :D.

Un saludo