It is necessary to impose 2 drop-down hover 'ohm block in two rows.

When you hover on the upper blocks, the lower part is revealed, but does not "lay down" on the lower block (and, as I understand it, falls under it). z-index does not solve the problem, since the context groups are different.

How to implement a complete overlap of any other dropdown box? On css or js , it doesn't matter.

Thank.

 .wrapper { max-width: 500px; font-size: 0; } .item { display: inline-block; position: relative; text-decoration: none; width: 240px; height: 170px; z-index: 3; font-size: 16px; } .item-open { display: none; position: absolute; top: 165px; left: 0; width: 240px; height: 130px; } .item:hover { background: red; } .item:hover .item-open { background: red; display: block; z-index: 10; } 
 <div class="wrapper"> <a href="" id="mydiv" class="item"> <span>Блок 1</span> <div class="item-open"></div> </a> <a href="" class="item"> <span>Блок 2</span> <div class="item-open"></div> </a> <a href="" class="item"> <span>Блок 3</span> <div class="item-open"></div> </a> <a href="" class="item"> <span>Блок 4</span> <div class="item-open"></div> </a> </div>

  • 3
    Remove the z-index: 3; . - Roman Grinyov
  • It worked! Thank! - Alexander Maslennikov
  • Or itself .item: hover {background: red; z-index: 10; } also set z-index; - HamSter

1 answer 1

Use the usual jQuery and toggle method.

 var btn = $("#mydiv"); var cnt = $("#mydiv_content"); btn.click(function(){ cnt.toggle(); }); 
 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <div id='mydiv'> Click me </div> <div id='mydiv_content' style="display: none"> Test </div>

As far as I remember, the elements created by JS will always have the latest z-index.

  • Alas, it works only for a click and will obviously move the lower block, but thanks - Alexander Maslennikov