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.