Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con subelemento menú

Estas en el tema de Problema con subelemento menú en el foro de CSS en Foros del Web. Buenas tardes amig@s: vuelvo a haceros una pregunta sobre un menú por el que tuve que preguntar hace un par de semanas. La cosa es ...
  #1 (permalink)  
Antiguo 06/01/2014, 13:09
 
Fecha de Ingreso: agosto-2007
Mensajes: 71
Antigüedad: 16 años, 7 meses
Puntos: 1
Problema con subelemento menú

Buenas tardes amig@s:

vuelvo a haceros una pregunta sobre un menú por el que tuve que preguntar hace un par de semanas. La cosa es que en aquella ocasión, el problema se solucionó, pero ahora vuelvo a tener otro problemilla, a ver si podéis resolvérmelo. Resulta que cuando abro un subelemento de otro subelemento, se solapan entre sí y no se visualiza correctamente; aquí os dejo una imagen para que veáis a que me refiero.



Aquí os dejo los distintos códigos:

---------HTML---------

Código HTML:
Ver original
  1. <div class="menu">
  2.                                             <ul class="nav">
  3.                                                 <li>
  4.                                                     <a href="index.html">Inicio<span class="flecha"></span></a>
  5.                                                 </li>
  6.                                                 <li>
  7.                                                     <a href="colecciones.html">Relojes<span class="flecha"></span></a>
  8.                                                     <ul>
  9.                                                         <li><a href="colecciones.html">Colecciones<span class="flecha"></span></a>
  10.                                                             <ul>
  11.                                                                 <li><a href="colecciones.html">Tapi<span class="flecha"></span></a></li>
  12.                                                             </ul>
  13.                                                         </li>
  14.                                                     </ul>
  15.                                               </li>
  16.                                                 <li>
  17.                                                     <a href="tiendas.html">Tiendas<span class="flecha"></span></a>
  18.                                                     <ul>
  19.                                                         <li><a href="cadiz.html">C&aacute;diz<span class="flecha"></span></a></li>
  20.                                                         <li><a href="cordoba.html">C&oacute;rdoba<span class="flecha"></span></a></li>
  21.                                                         <li><a href="castellon.html">Castell&oacute;n<span class="flecha"></span></a></li>
  22.                                                         <li><a href="malaga.html">M&aacute;laga<span class="flecha"></span></a></li>
  23.                                                         <li><a href="salamanca.html">Salamanca<span class="flecha"></span></a></li>
  24.                                                         <li><a href="sevilla_capital.html">Sevilla capital<span class="flecha"></span></a></li>
  25.                                                         <li><a href="sevilla_provincia.html">Sevilla provincia<span class="flecha"></span></a></li>
  26.                                                     </ul>
  27.                                               </li>
  28.                                                 <li>
  29.                                                     <a href="contacto.html">Contacto<span class="flecha"></span></a>
  30.                                                 </li>
  31.                                             </ul>        
  32.          </div>

---------CSS del div que lo contiene---------

Código CSS:
Ver original
  1. .menu {
  2.     padding-top:5px;
  3.     margin:0 auto;
  4.     width:960px;
  5.     height:45px;
  6.     }

---------CSS del menu en si---------

Código CSS:
Ver original
  1. * {
  2. font-family:sans-serif;
  3. list-style:none;
  4. text-decoration:none;
  5. margin:0;
  6. padding:0;
  7. text-align:center;
  8. }
  9.  
  10. .nav {
  11.     position: relative;
  12.     z-index: 999;
  13. }
  14.  
  15. .nav > li {
  16. width:240px;
  17. float:left;
  18. }
  19.  
  20. .nav li a {
  21. background:#20a64f;
  22. color:#FFF;
  23. display:block;
  24. border:1px solid;
  25. padding:10px 12px;
  26. }
  27.  
  28. .nav li .flecha{
  29. font-size: 9px;
  30. padding-left: 6px;
  31. display: none;
  32. }
  33.  
  34. .nav li a:not(:last-child) .flecha {
  35. display: inline;
  36. }
  37.  
  38. .nav li a:hover {
  39. background:#e61229;
  40. }
  41.  
  42. .nav li {
  43. position:relative;
  44. }
  45.  
  46. .nav li ul {
  47. display:none;
  48. position:absolute;
  49. min-width:240px;
  50. }
  51.  
  52. .nav li:hover > ul {
  53. display:block;
  54. }
  55.  
  56. .nav li ul li ul {
  57. right:-140px;
  58. top:0;
  59. }
  #2 (permalink)  
Antiguo 06/01/2014, 15:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con subelemento menú

Pues en principio bastaría que cambiarás:

Código CSS:
Ver original
  1. .nav li ul li ul {
  2.   right:-140px;
  3.   top:0;
  4. }

por:

Código CSS:
Ver original
  1. .nav li ul li ul {
  2.   right: -100%;
  3.   top: 0;
  4. }
  #3 (permalink)  
Antiguo 06/01/2014, 18:21
 
Fecha de Ingreso: agosto-2007
Mensajes: 71
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Problema con subelemento menú

¡¡Genial!! Aunque me encantaría poder "bajar" un poco ese nuevo cuadro que se abre; es decir, que empezara justo donde acaba el cuadro del apartado "Colecciones", ya que así, queda bastante lioso.

  #4 (permalink)  
Antiguo 08/01/2014, 06:04
 
Fecha de Ingreso: agosto-2007
Mensajes: 71
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Problema con subelemento menú

¿Alguien sabe como hacerlo? Por más que pruebo cosas en el código, no lo consigo
  #5 (permalink)  
Antiguo 08/01/2014, 06:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con subelemento menú

Pues si para que aparezca justo a la derecha del elemento y a la misma altura haces:

Código CSS:
Ver original
  1. .nav li ul li ul {
  2.   right: -100%;
  3.   top: 0;
  4. }

Entonces para que aparezca por debajo, ¿cómo será?
  #6 (permalink)  
Antiguo 08/01/2014, 12:55
 
Fecha de Ingreso: agosto-2007
Mensajes: 71
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Problema con subelemento menú

Al final era el único valor que no había tocado, jajaja. Gracias como siempre!

Etiquetas: background, color, hover, html
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 05:37.