Foros del Web » Creando para Internet » CSS »

Submenu horizontal en ie9

Estas en el tema de Submenu horizontal en ie9 en el foro de CSS en Foros del Web. Hola, En una página que estoy diseñando he creado un menu horizontal que al pasar por uno de los enlaces muestra un submenú también horizontal ...
  #1 (permalink)  
Antiguo 20/07/2012, 18:04
 
Fecha de Ingreso: septiembre-2010
Mensajes: 22
Antigüedad: 13 años, 6 meses
Puntos: 1
Submenu horizontal en ie9

Hola,

En una página que estoy diseñando he creado un menu horizontal que al pasar por uno de los enlaces muestra un submenú también horizontal justo debajo. El caso es que funciona perfecto en todos los navegadores excepto en ie9 (e inferiores, pero el que me interesa es a partir del 9).
El problema es que al dejar el enlace que abre el submenu para pasar a uno de los nuevos enlaces, el submenu desaparece. Es como si el submenu no respondiese al display:block que le he puesto.

He provado cambiando los displays, los márgenes, los paddings...

No sé qué hacer. A ver si me podéis echar una mano. La página es la siguiente:
http://charocalvo.org/

Gracias.

Última edición por peponks; 21/07/2012 a las 06:16
  #2 (permalink)  
Antiguo 21/07/2012, 17:12
 
Fecha de Ingreso: septiembre-2010
Mensajes: 22
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Submenu horizontal en ie9

A nadie se le ocurre nada?
  #3 (permalink)  
Antiguo 23/07/2012, 07:44
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 1 mes
Puntos: 57
Información Respuesta: Submenu horizontal en ie9

Cita:
Iniciado por peponks Ver Mensaje
A nadie se le ocurre nada?
Hola peponks, que tal.
Prueba este menú.
  #4 (permalink)  
Antiguo 23/07/2012, 15:37
Avatar de Oscar_Hidro  
Fecha de Ingreso: septiembre-2011
Ubicación: Aguascalientes, Mexico.
Mensajes: 200
Antigüedad: 12 años, 5 meses
Puntos: 25
Respuesta: Submenu horizontal en ie9

Hola @peponks, seria bueno ver algo de código. Te recomiendo pongas el código de tu menú para poder observar por donde viene el problema
  #5 (permalink)  
Antiguo 27/07/2012, 21:33
 
Fecha de Ingreso: septiembre-2010
Mensajes: 22
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Submenu horizontal en ie9

Hola.

Perdonad, entre que ya había perdido toda esperanza y que tengo problemas con la conexión a internet no me había dado cuenta de que me habíais respondido.

Mirad, mi código css es este.

Código CSS:
Ver original
  1. #menu-pages {
  2.     border-bottom: 1px dotted #FFFFFF;
  3.     bottom: 0;
  4.     position: absolute;
  5.     width: 73%;
  6. }
  7. #menu-pages .menu li {
  8.     display: inline;
  9.     margin: 0 13px;
  10. }
  11. #menu-pages .menu li:before {
  12.     color: #C8CECE;
  13.     content: " • ";
  14.     font-size: 1em;
  15.     margin-right: 3px;
  16. }
  17. #menu-pages ul ul {
  18.     display: none;
  19. }
  20. #menu-pages ul li:hover > ul {
  21.     display: block;
  22.     height: 30px;
  23.     padding-top: 5px;
  24.     position: absolute;
  25.     width: 100%;
  26. }

Creo que el problema es que en ie el li:hover no funciona cuando el ratón no está exactamente sobre el li o los enlaces del submenu, ya que el display block no hace su función.

No sé si me explico, si lo podéis comprobar con ie seguro que me entendéis mejor.

gebremswar, gracias por el código, pero creo que no me sirve porque no es para un menú horizontal como el mío.

Bueno, muchas gracias por vuestro interés.
  #6 (permalink)  
Antiguo 28/07/2012, 17:11
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 1 mes
Puntos: 57
Información Respuesta: Submenu horizontal en ie9

Cita:
Iniciado por Oscar_Hidro Ver Mensaje
Hola @peponks, seria bueno ver algo de código. Te recomiendo pongas el código de tu menú para poder observar por donde viene el problema
Eso es lo que debió haber puesto al menos en su segundo mensaje en ves de poner algo sin valor alguno "A nadie se le ocurre nada?"

Cita:
Iniciado por peponks Ver Mensaje
No sé si me explico, si lo podéis comprobar con ie seguro que me entendéis mejor.
Ya lo había hecho, lo probé con IE9 y efectivamente no se puede seleccionar los sub-items como en los demás navegadores.
Cita:
Iniciado por peponks Ver Mensaje
gebremswar, gracias por el código, pero creo que no me sirve porque no es para un menú horizontal como el mío.
Crees? Entonces ni siquiera estas seguro de que te sirve o no?.

Te facilité un link con un menú y si el menú mostrado no es exactamente igual al que deseas, pues en realidad te lo di para que lo analices y te fijaras como debes crear tus reglas CSS para tu menú horizontal y ya después de analizarlo poder crear uno propio.

Pero veo que no eres capas de hacer eso, y solo te limitas a copiar el menú (código) que te facilité, ver en el navegador si es o no como el menú que quieres hacer y ni siquiera te detienes a analizar las reglas css de dicho menú.

Modifiqué el menú que te había 'linkeado' mensajes más arriba (probado en IE9) y ya si con esto no entiendes te recomiendo que pases por este foro en busca de "ayuda".

Código CSS:
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Gebremswar</title>
  6.     <style>
  7.         *{margin:0;padding:0;outline:0}
  8.         #wrapper{background:#CECECE;height:400px;margin:0 auto;overflow:hidden;width:700px}
  9.         #menu li{float:left;list-style:none;padding:5px 10px}
  10.         #menu li > ul {opacity:0;float:none;position:absolute;visibility:hidden}
  11.         #menu li:hover{background:#E9E980}
  12.         #menu li:hover > ul{opacity:1; visibility:visible}
  13.         #sub-nav{background:#E9E980;left:165px;padding:25px;position:absolute;width:643px}
  14.         #sub-nav li{float:none}
  15.         .sn-column{margin:0 200px 0 0;float:left}
  16.     </style>
  17. </head>
  18. <body>
  19. <div id="wrapper">
  20.     <ul id="menu">
  21.         <li id="home">HOME</li>
  22.         <li id="options">OPTIONS
  23.             <ul>
  24.                 <li>option  A1</li>
  25.                 <li>option  A2</li>
  26.                 <li>option  A3</li>
  27.             </ul>
  28.         </li>
  29.         <li id="about">ABOUT</li>
  30.     </ul>
  31. </div>
  32. </body>
  33. </html>

Última edición por gebremswar; 28/07/2012 a las 17:22
  #7 (permalink)  
Antiguo 01/08/2012, 19:33
 
Fecha de Ingreso: septiembre-2010
Mensajes: 22
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Submenu horizontal en ie9

Gracias por el código gebremswar, lo voy a probar en cuanto pueda, y si veo que lo puedo adaptar, no te preocupes que lo haré; no sería la primera vez.

Perdona que no haya respondido antes, los caseros donde vivía en Bruselas me dejaron sin internet durante todo el mes de julio y me conectaba como podía. Además he estado liado preparando el viaje de regreso a mi país. Te lo aclaro, pero no debería, porque ya veo que eres muy perspicaz y muy comprensivo.

Cita:
Crees? Entonces ni siquiera estas seguro de que te sirve o no?.

Te facilité un link con un menú y si el menú mostrado no es exactamente igual al que deseas, pues en realidad te lo di para que lo analices y te fijaras como debes crear tus reglas CSS para tu menú horizontal y ya después de analizarlo poder crear uno propio.
Efectivamente miré tu código, no lo copié y lo pegué en ningún sitio, y no vi nada que pensase que pudiese solucionar el problema, tampoco vi displays inline para los <li> del menu, lo que me hizo interpretar que no era para menus dispuestos en horizontal. De todas formas no tenía disponible mi ordenador, con lo cual no pude manipularlo, como te he dicho, lo haré con el nuevo que me propones.

Cita:
Eso es lo que debió haber puesto al menos en su segundo mensaje en ves de poner algo sin valor alguno "A nadie se le ocurre nada?"
Cita:
Pero veo que no eres capas de hacer eso, y solo te limitas a copiar el menú (código) que te facilité, ver en el navegador si es o no como el menú que quieres hacer y ni siquiera te detienes a analizar las reglas css de dicho menú.

Modifiqué el menú que te había 'linkeado' mensajes más arriba (probado en IE9) y ya si con esto no entiendes te recomiendo que pases por este foro en busca de "ayuda".
También te agradezco mucho el tono didáctico. Se ve que eres muy machote y muy elocuente, y sin duda tus lecciones sobre lo que debo o no debo hacer me ayudarán tanto en mi faceta personal como en mi participación en el foro.

Por otro lado, siempre que he participado en este foro he intentado hacerlo de la manera más respetuosa posible y tratando de compartir lo poco o lo mucho que sé. He aportado también código cuando he conseguido realizar con éxito lo que me proponía, tanto si lo había conseguido gracias al foro como si no. Este foro es una maravilla, ojalá pudiese ayudar más, estoy muy agradecido.

Por último, no quiero ser descortés, ya que veo que te has tomado algunas molestias que evaluaré cuando estudie el código, pero si no te gustó la formulación de mis mensajes, podrías haberlo dicho de otra manera. Yo no te recomendaré ser agradable, ni prejuzgar a las personas, sencillamente porque no soporto la didáctica barata.
  #8 (permalink)  
Antiguo 01/08/2012, 22:02
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 1 mes
Puntos: 57
Información Respuesta: Submenu horizontal en ie9

Cita:
Iniciado por peponks Ver Mensaje
Efectivamente miré tu código, no lo copié y lo pegué en ningún sitio, y no vi nada que pensase que pudiese solucionar el problema, tampoco vi displays inline para los <li> del menu, lo que me hizo interpretar que no era para menus dispuestos en horizontal. De todas formas no tenía disponible mi ordenador, con lo cual no pude manipularlo, como te he dicho, lo haré con el nuevo que me propones.
Me dejaste claro que no probaste mi ejemplo y que sin probar te apresuraste a decir:
Cita:
Iniciado por peponks Ver Mensaje
gebremswar, gracias por el código, pero creo que no me sirve porque no es para un menú horizontal como el mío.

Y a eso debe el contenido de mi anterior mensaje.

Y pues en realidad el tono lo pones tu al leer (hay frases que ya tienen su esencia). Pero vamos que alguien te diga que lo tu sabes que sirve, no sirve, es para .

Ahora estamos a la espera de ver ese menú (tu menu) perfectamente en IE
  #9 (permalink)  
Antiguo 03/08/2012, 06:12
 
Fecha de Ingreso: septiembre-2010
Mensajes: 22
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Submenu horizontal en ie9

Cita:
Y pues en realidad el tono lo pones tu al leer (hay frases que ya tienen su esencia).
El tono es: Carácter o modo particular de la expresión y del estilo de un texto. Por ejemplo, el tono de mi anterior mensaje era irónico. El de tu mensaje efectivamente era didáctico y algo severo. Lo cual no me gustó.

Cita:
Pero vamos que alguien te diga que lo tu sabes que sirve, no sirve, es para .
En ese caso, me alegro de que nuestra comunicación sea exclusivamente virtual

Bueno, en cualquier caso no tengo ánimo de seguir polemizando. Probablemente me precipité en mi tercer mensaje al no haber tenido oportunidad de probar el código, lo mismo que creo que tú podrías haber dicho las cosas de otra manera. Pero, efectivamente tenías tú razón y el código que me propusiste se adaptaba a lo que estaba buscando. Siento haber herido tu orgullo. Gracias por el código, he aprendido otra manera de hacer menus en horizontal.

Cita:
Ahora estamos a la espera de ver ese menú (tu menu) perfectamente en IE
En cualquier caso he estado modificando tu código y he conseguido hacer exactamente lo que quería viéndose bien en ie9. Sin embargo, en mi página, aplicando el código exactamente igual, sigue sin funcionar, y no entiendo por qué. ¡¡¡Es desesperante!!!

Dejo ambos códigos y el enlace a la página por si tú o alguien se sigue sintiendo con el ánimo de ver dónde está el problema.

Este es tu código manipulado por mí para hacerlo lo más parecido a mi idea original (también he modificado ligeramente el html para que se adecue a la estructura html de mi página):

Código CSS:
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Gebremswar</title>
  6.     <style>
  7.         *{margin:0;padding:0;outline:0}
  8.         #wrapper{background:#CECECE;height:400px;margin:0 auto;overflow:hidden;width:700px; position:relative}
  9.         #menu {position:absolute;bottom:200px;width:73%;border-bottom:1px #FFF dotted}
  10.         #menu li{float:left;list-style:none;padding:2px 13px}
  11.         #menu li:before {color: #000;content: " • ";font-size: 1em;padding-right:3px}
  12.         #menu li > ul {opacity:0;float:none;position:absolute;visibility:hidden; left:0px}
  13.         #menu li > ul li {padding:10px 13px}
  14.         #menu li:hover > ul{opacity:1; visibility:visible}
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="wrapper">
  19. <div>
  20. <div>
  21.     <ul id="menu">
  22.         <li id="home">HOME</li>
  23.         <li id="options"><a href="#">OPTIONS</a>
  24.             <ul>
  25.                 <li><a href="#">option  A1</a></li>
  26.                 <li><a href="#">option  A2</a></li>
  27.                 <li><a href="#">option  A3</a></li>
  28.             </ul>
  29.         </li>
  30.         <li id="about">ABOUT</li>
  31.     </ul>
  32. </div>
  33. </div>
  34. </div>
  35. </body>
  36. </html>

Este es mi código css siguiendo exactamente el código anterior:

Código CSS:
Ver original
  1. #menu-pages .menu {
  2.     position:absolute;
  3.     bottom:0px;
  4.     width:73%;
  5.     border-bottom:1px #FFF dotted;
  6. }
  7.  
  8. #menu-pages .menu li {
  9.     float:left;
  10.     list-style:none;
  11.     padding:2px 13px
  12. }
  13.  
  14. #menu-pages .menu li:before {
  15.     color: #FFF;
  16.     content: " • ";
  17.     font-size: 1em;
  18.     padding-right:3px
  19. }
  20.  
  21. #menu-pages .menu li > ul {opacity:0;float:none;position:absolute;visibility:hidden; left:0px}
  22.  
  23. #menu-pages .menu li > ul li {padding:10px 13px}
  24.  
  25. #menu-pages .menu li:hover > ul{opacity:1; visibility:visible}

Dejo también el reset.css por si tuviese algo que ver, aunque no veo nada raro:


Código CSS:
Ver original
  1. /* RESET */
  2. /* ----------------------------------------- */
  3.  
  4. /* Global reset */
  5. /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
  6. *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0;}
  7. table { border-collapse:collapse; border-spacing:0 }
  8. fieldset, img { border:0 }
  9. address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
  10. ol, ul, li { list-style:none }
  11. caption, th { text-align:left }
  12. h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
  13. q:before, q:after { content:''}
  14.  
  15. /* Global reset-RESET */
  16. /* The below restores some sensible defaults */
  17. strong { font-weight:bold }
  18. em { font-style:italic }
  19. a img { border:none } /* Gets rid of IE's blue borders */

Gracias por tu ayuda y por las molestias que te has tomado.

Etiquetas: horizontal, ie9, submenu
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 15:44.