他の要素の上にDropDownの場所

Question

私はdropdownを入れようとしましたが、他の要素の上にはありません。私はz-indexを入れてみましたが、まだ運がありません。私はposition: 'relative'を作ったが、ドロップダウンボタンをホバーすると要素が押し下げられた。

相続サイトhttp://jaysonvelagio.webprodigymedia.com/

<div id="believe-belong"> 
    <div class="site-width"> 
     <div class="two-col"> 
      <div class="two-col-one image"> 
       <img src="assets/image/dine.jpg" alt="CLICKTREP Dining Privileges" /> 
      </div><!-- .two-col-one.image --> 

      <div class="two-col-two"> 
       <h3 class="green">Dine</h3> 
       <p>Taste your favorite mouthwatering dish for less on restaurants/Café/Bakeshop of your choice all over the Metro. Take advantage of the regular discounts and perks whenever you visit our partners.</p> 
         <div class="dropdown"> 
          <button class="dropbtn">partners in dine</button> 
          <div class="dropdown-content"> 
          <a href="#">Link 1</a> 
          <a href="#">Link 2</a> 
          <a href="#">Link 3</a> 
          </div> 
         </div> 
      </div><!-- .two-col-two --> 
     </div><!-- .row.two-col --> 

    </div><!-- .site-width --> 
</div><!-- #believe-belong --> 


<div id="gray-back"> 
    <div class="site-width"> 
     <div class="two-col" > 
      <div class="two-col-two"> 
       <h3 class="green">Shop</h3> 
       <p>Instant Discounts anytime from today’s best Shopping stores. <br>Like Toby’s Sport, RUNNR, Ideal Vision and a lot more. </p> 
       <a href="clubmembers/blog.php" class="button">Partner Stores</a>  
      </div><!-- .two-col-two --> 
      <div class="two-col-one image"> 
       <img src="assets/image/shop.jpg" alt="CLICKTREP Dining Privileges" /> 
      </div><!-- .two-col-one.image -->  
     </div><!-- .row.two-col --> 

    </div><!-- .site-width --> 
</div><!-- #believe-belong --> 

Answer 1

私はウェブサイトで、あなたのコードでプレーしていたし、あなたの問題はあなたが思うよりも解決するために、もう少し複雑であるようです。

このドロップダウンが表示されない理由は、オーバーフローが発生したためです：親divのクラスtwo-colで非表示になっています。あなたがしようとすると、オーバーフロー追加した場合

は今：あなたが見ることができるように、それは全体のDOM構造を台無しことに見える：

を、あなたがこの問題を解決できる唯一の方法は、オーバーフローを追加することです：に見えますあなたのdivと構造を並べ替える方法を参照してください。

UPDATE：

私はoverflow-y:visibleを追加すると、それを持つ別のプレイを持っていました。今度はUIを使いこなすのではなく、そのdivにスクロールバーを追加します。それがうまくいくなら、これで進むことができます。

.two-col { 
    overflow-x: hidden; 
    overflow-y: visible; 
    position: relative; 
}