How to make a pull-down menu centered?

Navigation
1

I have all day trying to center the pull-down menu and nothing that I have achieved. It should be noted that part of the menu is made with Bootstrap since I think of making the page with this framework, the pull-down menu I was trying to do with the help of CSS but nothing that achieved it, the fold-down menu always crawls below the list and I do not achieve make it occupy 100% of the screen and that is centered and with the link's side by side. When I apply the inline.block property instead of being placed side by side what they do is place one on top of the other, I do not understand why.

here is my code: 

*{
    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>

Could someone help me please? what I want to do is a menu like the one on this page: drop-down menu , I do not see the complication, but I think what is making things difficult for me is Bootstrap.

    
asked by JulianProg 05.11.2018 в 01:40
source

2 answers

1

Hello friend, you can do it using the display:flex property.

Al html I added a few sections just to apply styles 

* {
  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>
    
answered by 05.11.2018 в 05:59
0

Note that the correct thing is inline-block , with a hyphen instead of the point you were using.

Even so, it is true that Bootstrap works with a standard HTML and CSS code that give it a default appearance, for example the submenus within the parent limiting its width.

To get the look you are looking for, you must overwrite some properties: 

/*
 *   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>
    
answered by 05.11.2018 в 10:46
jquery validate validate two values in the same input System.Data.SqlClient.SqlException: Could not find stored procedure