[英]DropDown place in top of other element css
I tried putting a dropdown but hes not on top of other elements. 我尝试过放置下拉菜单,但他不在其他元素之上。 I tried puting
z-index
but still no luck. 我尝试放入
z-index
但仍然没有运气。 I've make the position: 'relative'
but the element got pushed down when hovering on the dropdown button. 我的
position: 'relative'
但是当悬停在下拉按钮上时,元素被向下推。
heres the site http://jaysonvelagio.webprodigymedia.com/ 网站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 -->
I had a play with your code in the website and seems your issue is a bit more complex to solve than you think. 我在网站上玩过您的代码,看来您的问题要比您想象的要复杂得多。
The reason you won't get that dropdown is that you have overflow:hidden on the parent div with class two-col
. 您没有得到该下拉菜单的原因是您有溢出:隐藏在父类div中,类为
two-col
。
Now if you try and add overflow:visible to that it messes with the whole DOM structure as you can see: 现在,如果您尝试添加overflow:visible,那么它就会与整个DOM结构混淆,如您所见:
The only way you can fix this is to add overflow:visible to your div and see how you can rearrange the structure. 解决此问题的唯一方法是在div中添加overflow:visible,并查看如何重新排列结构。
UPDATE: 更新:
I had another play with it with only adding overflow-y:visible
. 我还有另一个玩法,只添加了
overflow-y:visible
。 This time it doesn't mess with the UI but adds a scrollbar to that div. 这次,它不会与UI混淆,而是向该div添加了一个滚动条。 If that's OK you can proceed with this one.
如果可以,则可以继续进行。
.two-col {
overflow-x: hidden;
overflow-y: visible;
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.