0

tengo un menu que dicho menu tiene submenus y se muestran hacia abajo, lo que ocurre es que cuando pongo para ver el submenu, este se encuentra tapado por un div que tengo para contenido, como puedo hacer para que el menu se encuentra por encima del div de contenido.

asdad

ese submenu llega hasta un Link 4 y solo se muestran 2.

Aca código 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 */

Aqui el codigo html

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

1 respuesta 1

1

Una opcion es jugar con el z-index entre mas grande este, mas adelante estara de los demas, por ejemplo:

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>

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.