DropDown在其他元素頂部的地方css

我試過把dropdown但他不在其他元素之上。我試圖把z-index但仍然沒有運氣。我製作了position: 'relative'，但當鼠標懸停在下拉按鈕上時，元素被推下。DropDown在其他元素頂部的地方css

繼承人的網站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 -->

來源

2016-12-05 Jay Son

你的代碼在哪裏？ –

你可以發佈代碼嗎？ – MSH

我在這裏得到了下拉按鈕的代碼http://www.w3schools.com/css/css_dropdowns.asp –

我曾在網站與您的代碼戲，看來你的問題是一個比較複雜一點解決比你想象的。

你不會得到這個下拉菜單的原因是你有overflow：隱藏在父類div上，two-col。

現在，如果你嘗試添加溢出：可見，它與整個DOM結構打亂，你可以看到：

就可以解決這個問題的唯一方法是溢出補充：可見你的div，看看你如何重新安排結構。

UPDATE：

我與它另一齣戲裏，只有加入overflow-y:visible。這一次它不會混淆UI，但會在該div中添加一個滾動條。如果沒關係，你可以繼續這個。

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

來源

2016-12-05 21:27:11 Yaser

謝謝。我也在想這個下拉菜單不能放在這裏 –

DropDown在其他元素頂部的地方css

回答

相關問題