submenú horizontal debajo de los padres con CSS

se muestra mejor con un violín: http://jsfiddle.net/Jnttm/submenú horizontal debajo de los padres con CSS

¿Cómo puedo obtener el submenú para centrar debajo del elemento de menú padre? Muchos de los trucos de centrado que he encontrado no se aplican porque el elemento hijo es más ancho que el padre.

¿Esto es posible con CSS puro o tengo que recurrir a javascript?
Si se requiere JS, ¿alguien tiene el código de JQuery a mano para hacerlo?

Fuente

2011-10-27 Davy8

puede ser que usted tiene que definir un valor predeterminado width a su submenu así:

.sub-menu { 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 0; 
    white-space: nowrap; 
    text-align:center; 
    left:50%; 
    margin-left:-150px; 
    width:300px; 
} 
.active .sub-menu { 
    display:block; 
}

Marque esta http://jsfiddle.net/sandeep/Jnttm/1/

Fuente

2011-10-27 03:52:13 sandeep

la persona que me la dan voto negativo por favor explíqueme dónde estoy equivocado – sandeep

No estoy seguro de quién votó en contra, pero esto es exactamente lo que pedí. No funcionaría si hubiera un fondo en el submenú, ya que es más ancho que el contenido, pero en mi caso funciona. (Ahora que lo he implementado, no se ve del todo bien con la cantidad de elementos secundarios, pero esa no era la pregunta: p) – Davy8

Esto centrará sub menús: ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }

Fuente

2016-05-23 06:22:02 ashvek

submenú horizontal debajo de los padres con CSS

Respuesta

Cuestiones relacionadas