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

回答

相关问题