Sub-menu overwrite CSS images

Asked

Viewed 948 times

1

I am developing a web application and when I pass the mouse over the Between/Register a sub-menu appears, but the sub-menu instead of superimposing the images it pushes down the images. I wish that when the sub-menu appears it will overwrite 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>
<script src="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 css html5 css3

1 answer

0


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

(But the real problem is that your menu disappears when you take your mouse off "active area"!) You’ll have to see how to treat it...

$(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>
<script src="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>

  • thanks for replying @huhocsl, but how can I make the submenu not disappear when I take the mouse from active area ?

  • Guy the way you built the action to pop up this menu with Javascript I won’t know how to answer you. Until you have posted the question with the menu "bugged" rss I just arranged for it not to push the images :)

  • I would use other techniques to make this effect of Menu pq do not understand much of JS. But I advise you to create a "New Question" with this doubt. Surely someone will help you;!

  • I added the code you recommended but when applying position:Bsolute,

  • In class .conteudo_dropdow place z-index: 99999; which should solve. But here on my pc and the above Snippet is working normal...

  • explain why when you put z-index:99999; it worked ?

  • So, first z-index only works for elements that have some position set. Then as the menu I know that it is with position:Absolute just put the z-index:9999; that made it overlap all other items, which by default has the z-index:1; (the higher the z-index number, but for "top" it is in relation to the others) Take a look at this link that you will understand, run the example and play with the z-index number https://www.w3schools.com/cssref/pr_pos_z-index.asp

Show 2 more comments

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.