Sub-menu superimpose CSS images

Question

Sub-menu superimpose CSS images

Navigation

#1 by (0 votes)

1

I'm developing a web application and when I mouse over the Enter / Sign up appears a sub-menu, but the sub menu instead of overlapping the images it pushes down the images. I would like that when the submenu appears it superimposes the images

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseout", function() {
    $(".conteudo_dropdow").hide();
  });



});

.conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: -12px;
  left: 15%;
  width: 75%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-xs-3 col-md-3">
  <h4 class="entre">Entre/Cadastre-se</h4>
</div>

<div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>

  </ul>
  <h4 class="cadastrese">Não é Cadastrado? Cadastre-se</h4>
  <button type="button" class="cadastro">Cadastro</button>

</div>
<div id="hs_container" class="hs_container">
  <div class="hs_area hs_area1">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area2">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area3">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area4">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area5">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/3.jpg"alt="" />
  </div>
</div>

html html5 css css3

asked by anonymous 02.02.2018 / 16:43

1 answer

Insert with random characters - PostgreSQL Select in two tables. How to return a single list?

score 0 · Accepted Answer

Young just put position:absolute on conteudo_dropdow and hit margins , see the Snippet below:

(But the problem is that your menu disappears when you move the mouse over the " active area"!) You'll have to see how to handle this ...

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseout", function() {
    $(".conteudo_dropdow").hide();
  });



});

.conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: 38px;
  left: 0;
  width: 75%;
  border: 1px solid black;
  position: absolute;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-xs-3 col-md-3">
  <h4 class="entre">Entre/Cadastre-se</h4>
</div>

<div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>

  </ul>
  <h4 class="cadastrese">Não é Cadastrado? Cadastre-se</h4>
  <button type="button" class="cadastro">Cadastro</button>

</div>
<div id="hs_container" class="hs_container">
  <div class="hs_area hs_area1">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area2">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area3">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area4">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/3.jpg"alt="" />
  </div>
  <div class="hs_area hs_area5">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/2.jpg"alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/3.jpg"alt="" />
  </div>
</div>