1

Estoy maquetando un sitio. Usé un menú existente al cuál le di soporte para sub-menús. Va perfecto, es sólo que tengo un problema con el efecto hover (barra inferior) en el submenú.

No he podido hacer que la barra inferior sólo abarque el ancho del texto (elemento "a") y no el ancho del contenedor completo (elemento "li"). Estoy usando bootstrap.

Esto grafica el resultado que estoy tratando de obtener:

ejemplo del resultado que estoy tratando de lograr

Tengo el código trabajando en codepen así que se puede ver y editar live aquí: https://codepen.io/diego-ulloa/pen/xQMVza

Agradecería ayuda ya que no lo he podido lograr.

Muchas gracias!!

1 respuesta 1

0

Al elemento ".dropdown-item" deberías darle "display: inline-block". El problema es que si más de un elemento del submenú entra en una línea, así se pondrá... con lo que "dropdown-menu" lo pasaría a flexbox en columna. Te dejo el código por si las dudas:

.dropdown-menu { display: flex; flex-direction: column; align-items: center; }

Añadiendo eso al css debería funcionar.

1
  • Perfecto amigo! Era eso lo que necesitaba! Lo que sí, .dropdown-menu tiene display:none al estar oculto, entonces no puedo cambiarlo directamente en esa clase, sin embargo debí cambiarla en la clase .show que adquiere el mismo submenu por parte de bootstrap cuando se muestra. Así: .dropdown-menu.show { display: flex; flex-direction: column; align-items: center; } Muchas gracias!! Commented el 4 dic. 2018 a las 19:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.