A div is found hiding a drop down menu

Navigation
0

I have a menu that said menu has submenus and they are shown down, what happens is that when I put to see the submenu, it is covered by a div that I have for content, as I can do so that the menu is above the content div.

that submenu reaches a Link 4 and only 2 are shown.

Aca code css 

#container-menu{
    background:#555 ;
    height: 13rem;
}

#columna-superior{
    background: #00A9E0;
    height: 3.5rem;
    width: 100%;
}

#columna-inferior{
    height: 4rem;
    margin-top: 41px;
    margin-left: -15px;

}

#imagen-menu{
    margin-top: 30px;
}

#redes-sociales{
    float: right;
}

/* Navbar inferior */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {

        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

body {
        font-family: 'Roboto', Arial, sans-serif;
        background-color: #ebebeb;
        overflow-x: hidden;
        text-align: center;
}

header {
        width: 120%;
        height: 50px;
        background-color: #222; /* Color del cuerpo del nav */
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

header > nav > div {
        float: left;
        width: 10%;
        height: 100%;
        position: relative;
}

header > nav > div > a {
        text-align: center;
        width: 100%;
        height: 100%;
        display: block;
        line-height: 50px;
        color: #fbfbfb;
        transition: background-color 0.2s ease;
        text-transform: uppercase;
}

header > nav > div:hover > a {
        background-color: rgba(0, 0, 0, 0.1);
        cursor: pointer;
}

header > nav > div > div {
        display: none;
        overflow: hidden;
        background-color: white;
        min-width: 200%;
        position: absolute;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        padding: 10px;
}

header > nav > div:not(:first-of-type):not(:last-of-type) > div {
        left: -50%;
        border-radius: 0 0 3px 3px;
}

header > nav > div:first-of-type > div {
        left: 0;
        border-radius: 0 0 3px 0;
}

header > nav > div:last-of-type > div {
        right: 0;
        border-radius: 0 0 0 3px;
}

header > nav > div:hover > div {
        display: block;
}

header > nav > div > div > a {
        display: block;
        float: left;
        padding: 8px 10px;
        width: 46%;
        margin: 2%;
        text-align: center;
        background-color: #444;
        color: #fbfbfb;
        border-radius: 2px;
        transition: background-color 0.2s ease;
}

header > nav > div > div > a:hover {
        background-color: #212121;
        cursor: pointer;
}

h1 {
        margin-top: 100px;
        font-weight: 100;
}

p {
        color: #aaa;
        font-weight: 300;
}

@media (max-width:600px) {
        header > nav > div > div > a {
                margin: 5px 0;
                width: 100%;
        }
        header > nav > div > a > span {
                display: none;
        }
}

/* Fin navbar inferior */

/* Contenido */

#contenido-8{
    margin-top: 100px;
    background: #fff;

}
.texto{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;

}
p{
    color:#222;
    font-size: 20px;
font-family:'Roboto Slab';
}



/* Fin Contenido */

Here the html code 

    <body style="background: #bdbdbd;">
    <div class="cuerpo">
<!-- Inicio Menu -->
<div class="container-fluid badge-danger" id="container-menu">
    <div class="row">
        <div class="col-lg-12">
            <!-- Menu Superior -->
            <div class="row">
                <div class="col-lg-12" id="columna-superior">
                <!--Inicio navbar -->
                <nav class="navbar navbar-expand-lg" style="background: #00A9E0;">
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                      <a class="nav-item nav-link active text-white" href="#">Inicio</a>
                      <a class="nav-item nav-link text-white" href="#">Procesadores de Pago</a>
                      <a class="nav-item nav-link text-white" href="#">Precios</a>
                      <a class="nav-item nav-link text-white" href="#">VIP</a>
                    </div>
                  </div>
                </nav>  
                </div>
                <!-- Fin navbar -->
            </div>
            <!-- Fin Menu superior -->

            <!-- Imagen del menu -->
            <div class="row">
                <div class="col-lg-12 d-flex justify-content-lg-center" id="imagen-menu">
                    <img src="" style="height: 80px;">
                </div>
            </div>
            <!-- Fin imagen del menu -->

            <!-- Menu Inferior -->
            <div class="row ">
                <div class="col-lg-12" id="columna-inferior">
                    <!-- Inicio navbar -->
                        <header>
        <nav>
                <div>
                        <a class="ml-2"><span>Lorem ipsum. </span>1</a>
                        <div>
                                <a>Link 1</a>
                                <a>Link 2</a>
                                <a>Link 3</a>

                        </div>
                </div>
                <div>
                        <a><span>Lorem. </span>2</a>
                        <div>
                                <a>Link 1</a>
                                <a>Link 2</a>
                                <a>Link 3</a>
                                <a>Link 4</a>
                                <a>Link 5</a>
                                <a>Link 6</a>
                        </div>
                </div>
                <div>
                        <a><span>Lorem ipsum dolor. </span>3</a>
                        <div>
                                <a>Link 1</a>
                                <a>Link 2</a>
                                <a>Link 3</a>
                                <a>Link 4</a>
                                <a>Link 5</a>
                                <a>Link 6</a>
                        </div>
                </div>
                <div>
                        <a><span>Lorem ipsum. </span>4</a>
                        <div>
                                <a>Link 1</a>
                                <a>Link 2</a>
                                <a>Link 3</a>
                                <a>Link 4</a>
                                <a>Link 5</a>
                                <a>Link 6</a>
                        </div>
                </div>
                <div>
                        <a><span>Lorem. </span>5</a>
                        <div>
                                <a>Link 1</a>
                                <a>Link 2</a>
                                <a>Link 3</a>
                                <a>Link 4</a>
                                <a>Link 5</a>
                                <a>Link 6</a>
                        </div>
                </div>
                <div>
                        <a><span>Lorem ipsum dolor sit.</span>6</a>
                        <div>
                                <a>Link 1</a>
                                <a>Link 2</a>
                                <a>Link 3</a>
                                <a>Link 4</a>
                                <a>Link 5</a>
                                <a>Link 6</a>
                        </div>
                </div>
        </nav>
</header>
                    <!-- Fin navbar -->
                </div>
            </div>
            <!-- Fin Menu inferior -->
        </div>
    </div>
</div>
<!-- Fin menu -->   

<!-- Contenido de la pagina -->

<div class="container-fluid ml-4 pr-5">
      <div class="row">
        <div class=" col-lg-7 " id="contenido-8">
             <div class="texto">
                <h1 class="display-4">NeoBux: Veterana PTC para ganar dinero</h1>
                <hr>
                <p  class="mt-4"><strong>Neobux es la página PTC (Paid To Click o lo que es lo mismo, pago por clic) más veterana del sector.</strong> Bien utilizada y junto a una buena estrategia de referidos alquilados, realmente se puede generar grandes beneficios. Si estás buscando una página para ganar dinero por Internet a la que dedicar tiempo, ésta es sin duda una buena opción para comenzar.</p>
             </div>
        </div>
        <div class="col-lg-4 bg-warning">
          <p><b>Lorem  ipsum dolor sit amet,</b> consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

<!-- Fin contenido de la pagina -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    </div>
  </body>
    
asked by Victor Escalona 24.05.2018 в 02:52
source

1 answer

1

One option is to play with the z-index of the bigger this, later it will be of the others, for example: 

div{
  width: 160px;
  height: 120px;
  position: absolute;
}

#card1{
  top: 70px;
  left: 20px;
  background-color: #333;
  z-index: 20;
}

#card2{
  top: 50px;
  left: 100px;
  background-color: #3f3;
  z-index: 10;
}

#card3{
  top: 30px;
  left: 155px;
  background-color: #f33;
  z-index: 40;
}

#card4{
  top: 55px;
  left: 280px;
  background-color: #33f;
  z-index: 30;
}
<div id="card1">Card #1</div>
<div id="card2">Card #2</div>
<div id="card3">Card #3</div>
<div id="card4">Card #4</div>
    
answered by 24.05.2018 / 03:47
source
How to get data from table roles the views through the Auth methods in laravel? How do I manage to copy all rows of a datagridview in c # into a single text file?