1

Tengo todo el día intentando centrar el menu desplegable y nada que lo he logrado. Cabe destacar que parte del menú está hecho con Bootstrap ya que pienso hacer la página con este framework, el menú deplegable lo estaba tratando de realizar con ayuda de CSS pero nada que lo logro, el menu deplegable siempre mequeda debajo de la lista y no logro hacer que ocupe el 100% de la pantalla y que quede centrado y con los link´s unos al lado del otro. Cuando le aplico la propiedad inline.block en vez de colocarse unos al lado del otro lo que hacen es colocarse uno encima del otro, no entiendo por que.

acá mi código:

*{
    padding: 0;
    margin: 0;
}

#menu-desplegable{
    display: none;
}
li:hover #menu-desplegable{
    display: block;
    width: 100%;
}   
#logo{
    width: 100px;
    height: 30px;
}
ul li #menu-deplegable{
    list-style: none;
}

nav.navbar{
    position: relative;
    width: 100%;
    margin: 0 auto;
}

ul.navbar-nav li #menu-desplegable{
    position: absolute;
    left: 0;
    width: 100%;
    background-color: aqua;
    z-index: 3;
    text-align: center;
}

ul.navbar-nav {
    display: block;
    text-align: center;
    position: relative;
    width: 100%;

    
}
ul.navbar-nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 50px;
    z-index: 3;
}
#menu-desplegable {
    margin-left: 0;
    text-align: center;
    position: absolute;
    left: 0;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#" style="position: absolute;">Navbar</a>
  <button class="navbar-toggler navbar-toggler-right"  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="link-desplegable" href="#">Menu Desplegable</a>
        <ul id="menu-desplegable" style="color: indigo;" >
          <li><a href="">Enlace 1</a></li>
          <li><a href="">Enlace 2</a></li>
          <li><a href="">Enlace 3</a></li>
          <li><a href="">Enlace 4</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Alguien podría ayudarme por favor? lo que quiero hacer es un menú igual al que está de ejemplo en esta página: menu-desplegable, no le veo la complicación, pero creo que lo que me esta poniendo las cosas difíciles es Bootstrap.

2 respuestas 2

1

Hola amigo puedes hacerlo mediante la propiedad display:flex.

Al html le agregué unos section nada más para aplicar estilos

* {
  margin: 0;
  padding: 0;
}

#menu-desplegable {
  display: none;
}

li:hover #menu-desplegable {
  display: block;
  width: 100%;
}

#logo {
  width: 100px;
  height: 30px;
}

#enlace {
  width: 15%;
  margin: 2.5%;
}

.center {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.center a {
  width: 25%;
  text-decoration: none;
}

ul.navbar-nav {
  width: 100%;
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  list-style: none;
}

ul.navbar-nav li #menu-desplegable {
  width: 100%;
  background-color: aqua;
}
<nav id="contenedor-nav-bar" class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
	<span class="navbar-toggler-icon"></span> 
	</button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent" style="width: 100%;">
    <section class="navbar-contenedor">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="navbar-brand" id="link-logo" href="#">
            <img id="logo">LOGO</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">Home 
	 <span class="sr-only">(current)</span></a> </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="link-desplegable" href="#">Menu Desplegable</a>
          <ul id="menu-desplegable">
            <section class="center">
              <li id="enlace"><a href="">Enlace 1</a></li>
              <li id="enlace"><a href="">Enlace 2</a></li>
              <li id="enlace"><a href="">Enlace 3</a></li>
              <li id="enlace"><a href="">Enlace 4</a></li>
            </section>
    </section>
    </ul>
    </li>
    </ul>
  </div>
</nav>

0

Fíjate que lo correcto es inline-block, con guión en lugar de punto que estabas usando.

Aún así, es cierto que Bootstrap trabaja con un código HTML y CSS estándar que le dan un aspecto por defecto, por ejemplo los submenús dentro del padre limitando su ancho.

Para conseguir el aspecto que buscas, debes sobreescribir algunas propiedades:

/*
 *   Tus estilos
 */
#menu-desplegable{
    display: none;
}
li:hover #menu-desplegable{
    display: block;
    width: 100%;
}   
#logo{
    width: 100px;
    height: 30px;
}
ul li #menu-deplegable{
    list-style: none;
}
ul.navbar-nav{
    width:100%;
    background-color: blueviolet;
}
ul.navbar-nav li #menu-desplegable{
    width: 100%;
    background-color: aqua;
}

/* 
 *   Estilo horizontal doble
 */
ul.navbar-nav {
    display: block;
    text-align: center;
    position: relative;
}
ul.navbar-nav li {
    display: inline-block;
}
#menu-desplegable {
    margin-left: 0;
    text-align: center;
    position: absolute;
    left: 0;
}
#menu-desplegable li {
    display: inline-block;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" style="width: 100%;">
    <ul class="navbar-nav">
      <li class="nav-item>"><a class="navbar-brand" id="link-logo" href="#"><img id="logo">LOGO</a></li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="link-desplegable" href="#">Menu Desplegable</a>
        <ul id="menu-desplegable" >
          <li><a href="">Enlace 1</a></li>
          <li><a href="">Enlace 2</a></li>
          <li><a href="">Enlace 3</a></li>
          <li><a href="">Enlace 4</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

2
  • Me sirvió tu ayuda amigo, hice unas cuantas modificaciones para que la barra desplegable sea un poco diferente pero ahora el problema es que no me ocupa el 100% de la pantalla y es por el espacio que me ocupa el logo, por lo que probé colocando con position: absolute y así si el menu desplegable me ocupa el 100%, ahora me surge otro problema, cuando reduzco la resolución (versión movil) el botón del menu deplegable me queda del lado izquierdo sobre el logo, le tengo la clase navbar-toggler-right y aun así se mueve al lado izquierdo sobre el logo. Acabo de actualizar el código para q lo veas.
    – JulianProg
    el 6 nov. 2018 a las 15:03
  • Es porque le añadiste la posición absoluta al logo, lo correcto sería limitar ese estilo a las resoluciones grandes. Quita esa propiedad del HTML y añade al CSS: @media (min-width: 992px) { .navbar-brand { position: absolute; } } el 12 nov. 2018 a las 12:04

Tu Respuesta

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

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