[SOLUCIONADO] Submenu sale descentrado

[MindPaniC]

Hola,

Los menus se despliegan correctamente pero salen todos a la izquierda en vez de debajo de su correspondiente zona.

Aqui podeis ver lo que ocurre al hacer hover sobre los tres primeros enlaces del menu principal (el grande)

http://test.javierdelpozo.com/

el codigo CSS es:

Código CSS:

#principal {
    margin-bottom:17px;
    float:right;
}
#principal ul {
    margin:0;
}
#principal ul li {
    display:inline;
    font-size:1em;
    font-family:'Droid Sans', sans-serif;
    text-transform:uppercase;
}
#principal ul li a {
    text-decoration:none;
    color:#f18e00;
    padding:17px 5px 17px 5px;
    margin-right:17px;
}
#principal ul li a:hover {
    color:#FFF;
    background-color:#f18e00;
}
#principal .activo a {
    color:#FFF;
    background-color:#f18e00;
}
#principal .ultimo a {
    margin-right:0;
}
#principal ul ul {
    display:none;
    position:absolute;
    margin-top:17px;
}
#principal ul li:hover ul {
    display:block;
    z-index:2;
}
#principal ul ul li {
    margin:0;
    font-size:1em;
    font-family:'Droid Sans', sans-serif;
    text-transform:uppercase;
}
#principal ul ul li a {
    width:auto;
    display:block;
    padding:5px;
    background-color:#f18e00;
    color:#FFF; 
}
#principal ul ul li a:hover {
    color:#666;
}
 

¿Cómo puedo solucionarlo?

[pzin]

Tienes que usar una posición relativa en cada elemento de la lista, para que la posición absoluta de la sublista sea relativa a ese elemento.

Código CSS:

#principal ul li {
  position: relative;
}
 

Luego para tu siguiente pregunta, es porque header tiene un overflow:hidden.

[MindPaniC]

Si pongo el positicion:relative no se despliega el submenu. No se como solucionarlo.

¿Alguna idea de que puedo hacer?

[pzin]

Iniciado por MindPaniC

Si pongo el positicion:relative no se despliega el submenu. No se como solucionarlo.

¿Alguna idea de que puedo hacer?

Iniciado por pzin

Luego para tu siguiente pregunta, es porque header tiene un overflow:hidden.

[MindPaniC]

Si quito el overflow:hidden; se me destroza el diseño y se colapsa el header

[jonni09lo]

Prueba entonces con un microclearfix

Saludos

[MindPaniC]

El microclearfix funciona perfectamente pero el submenu sigue sin salir debajo de cada item.

Lo he puesto asi:

Código CSS:

#principal ul li {
    position:relative;
    display:inline;
    font-size:1em;
    font-family:'Droid Sans', sans-serif;
    text-transform:uppercase;
}
 

¿que mas puedo hacer?

[jonni09lo]

Tienes que jugar con los display de los li

Para los elementos del primer nivel del menú usa display: inline-block;

Código CSS:

#principal ul li {
    display: inline-block;
    font-size: 1em;
    font-family: 'Droid Sans', sans-serif;
    text-transform: uppercase;
}
 

Para los elementos del segundo nivel usa display: block;

Código CSS:

#principal ul ul li {
    margin: 0;
    display: block;
    font-size: 1em;
    font-family: 'Droid Sans', sans-serif;
    text-transform: uppercase;
}
 

Saludos

[MindPaniC]

Muchas gracias!!!

Ahora funciona perfectamente. Lo siguiente que tengo que hacer es preparar la web para moviles, es responsive, y necesito hacer que al tocar con el dedo en un menu se despliegue el submenu y desplace los inferiores por que en el media query para moviles los menus van en vertical. Eso se hara con CSS o es jquery??

[jonni09lo]

Lo de el diseño en vertical del menú si lo puedes hacer con CSS lo de desplegar el submenú después de un click si es mejor hacerlo con Javascript

Saludos

[MindPaniC]

Ok Muchas gracias por todo, cierro este hilo y sigo trabajando que voy muy justo de tiempo jejejeje

Saludos!!

[pzin]

Normalmente en dispositivos táctiles funciona :hover perfectamente cuando en esa acción hay un elemento que se muestra, que en tu caso es ul, así que debería de funcionar bien sin JavaScript (o como le llamas tú, jQuery).

[jonni09lo]

Iniciado por pzin

Normalmente en dispositivos táctiles funciona :hover perfectamente cuando en esa acción hay un elemento que se muestra, que en tu caso es ul, así que debería de funcionar bien sin JavaScript (o como le llamas tú, jQuery).

Pues mira que yo he tenido problemas es con los links que llevan a otras paginas, cuando hago touch me lleva a la pagina en vez de desplegarme el submenu con :hover

O será que estaba haciendo algo mal

Saludos

[pzin]

Iniciado por jonni09lo

Pues mira que yo he tenido problemas es con los links que llevan a otras paginas, cuando hago touch me lleva a la pagina en vez de desplegarme el submenu con :hover

A mi siempre me ha ido bien si algún elemento descendiente del cual tenga :hover pasa de un display: none a display: block/inline/inline-block o de un visibility: hidden a un visibility: visible.

Y en caso de que no exista ese cambio, entonces si que hay que tirar de JavaScript (a lo mejor un ontouchstart="this.classList.toggle('hover')").

[jonni09lo]

Pues tendré que volver a revisar ese código y si no a demandar a la compañía por hacer cosas defectuosas

Saludos

[MindPaniC]

Perfecto!! gracias, a ver si soy capaz de hacerlo todo bien.

Saludos