下拉菜单无法显示隐藏溢出的 div

Question

In my case, dropdown cannot show over the card cause the overflow is hidden, any solution? Pls find bellow the css and html and js for the hover effect of a section. the idea of this card is a card with some text details and a dropdown list and in the right a banner with hover effect to have some options, as on the phone when we swipe to the left to get delete or...

 $(window).resize(function() { var $window = $(window); var windowsize = $window.width(); if (windowsize > 767) { $('.section2').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); } ); } }); $(window).trigger('resize'); $('.section2').bind('swiperight', function() { $('.section2').removeClass('hover'); }); $('.section2').bind('swipeleft', function() { $('.section2').removeClass('hover'); $(this).addClass('hover'); });

 .card { display: flex; width: 100%; background-color: white; border: 1px solid lightgray; border-radius: 8px; justify-content: space-between; align-items: center; padding: 20px; overflow: hidden; position: relative; transition: all ease.4s; height: 90px; margin-bottom: 100px; }.section1 { width: 95%; display: flex; flex-wrap: wrap; justify-content: space-between; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; }.dropdown:hover.dropdown-content { display: block; }.section2 { position: absolute; top: 0; right: 0; height: 100%; z-index: 1; display: flex; transition: all ease.4s; transform: translateX(90%); background-color: purple; color: whitesmoke; }.section2.hover { transform: translateX(0%); }.section2 a { color: var(--white); text-decoration: none; display: inline-flex; width: 60px; height: 100%; margin-right: 0%; align-items: center; justify-content: center; transition: all ease.4s; }.section2 a:hover { color: var(--gray2); background-color: var(--gray1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="section1"> <div>Ipsus lupem ipsus lupem</div> <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </div> </div> </div> <div class="section2"> <a href="">option1</a> <a href="">option2</a> <a href="">option3</a> <a href="">option4</a> </div> </div>

Answer 1

You need to remove position: relative from the ancestors. The combination of that and overflow: hidden is the cause of your problem.

 $(window).resize(function() { var $window = $(window); var windowsize = $window.width(); if (windowsize > 767) { $('.section2').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); } ); } }); $(window).trigger('resize'); $('.section2').bind('swiperight', function() { $('.section2').removeClass('hover'); }); $('.section2').bind('swipeleft', function() { $('.section2').removeClass('hover'); $(this).addClass('hover'); });

 .card { box-sizing: border-box; display: flex; width: 100%; background-color: white; border: 1px solid lightgray; border-radius: 8px; justify-content: space-between; align-items: center; padding: 20px; overflow: hidden; transition: all ease.4s; height: 90px; margin-bottom: 100px; }.section1 { width: 95%; display: flex; flex-wrap: wrap; justify-content: space-between; }.dropdown { display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; }.dropdown:hover.dropdown-content { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="section1"> <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </div> </div> </div> </div>