[英]DropDown place in top of other element css
我嘗試過放置下拉菜單,但他不在其他元素之上。 我嘗試放入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 -->
我在網站上玩過您的代碼,看來您的問題要比您想象的要復雜得多。
您沒有得到該下拉菜單的原因是您有溢出:隱藏在父類div中,類為two-col
。
現在,如果您嘗試添加overflow:visible,那么它就會與整個DOM結構混淆,如您所見:
解決此問題的唯一方法是在div中添加overflow:visible,並查看如何重新排列結構。
更新:
我還有另一個玩法,只添加了overflow-y:visible
。 這次,它不會與UI混淆,而是向該div添加了一個滾動條。 如果可以,則可以繼續進行。
.two-col {
overflow-x: hidden;
overflow-y: visible;
position: relative;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.