I am having an issue with a div that should overlap everything else as it functions as a menu. Despite trying various positioning tricks, the desired effect is not achieved. The div is only shown when hovering over a certain element.
Here is the structure of the HTML:
<ul class="product-prices-dropdown">
<li>
<a href="http://melopienso.com/testingtwo/product/forza10-medium-maintenance-de-ciervo-y-patatas/">Ver Precios</a>
<div class="price-list">
<ul class="prod-dd-list">
<li>
<div class="dd-shop-img-block">
Retailer1 </div>
<div class="dd-price-block">
<p class="dd-price-text">8,00€</p>
<p class="dd-tax-text">+tax & shipping</p>
</div>
<a href="http://www.retailer1.com" target="_blank" class="btn-dd-cart">Hello</a>
</li>
<li>
<div class="dd-shop-img-block">
Retailer 2 </div>
<div class="dd-price-block">
<p class="dd-price-text">11,00€</p>
<p class="dd-tax-text">+tax & shipping</p>
</div>
<a href="http://www.retailer2.com" target="_blank" class="btn-dd-cart">Hello</a>
</li>
</ul>
</div>
</li>
</ul>
Below is the corresponding SCSS code:
ul.products li.product { clear: both !important; display: block !important; margin-bottom: 50px !important; width: 100% !important;
a {
h3 {
display: block !important;
font-weight: 400 !important;
&:hover {
color: $corporate-color !important;
}
}
}
.gk-columns > div.product-image {
display: inline-block !important;
/*float: left !important;*/
height: 32% !important;
width: 32% !important;
}
.gk-columns > div.product-attributes {
padding-left: 1%;
width: 35% !important;
ul.list-product-attributes {
display: inline-block;
/*float: right;*/
p.list-product-attributes-label {
color: $black;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
p.list-product-attributes-value {
color: $grey-dark;
font-size: 12px !important;
margin-bottom: 0 !important;
margin-top: -5px !important;
}
}
}
.gk-columns > div.product-prices {
display: inline-block;
/*float: right;*/
position: relative;
width: 28% !important;
.product-prices-dropdown{
li {
color: #FFF;
a {
background-color: $corporate-color;
border: 1px solid $corporate-color;
color: #FFF !important;
display: inline-block;
height: 30px;
padding: 0 25px !important;
position: relative;
text-transform: uppercase;
}
div.price-list {
background-color: $corporate-color;
display: none;
height: 200px;
right: 54px;
margin-top: -1px;
padding: 5px 10px;
position: absolute !important;
width: 500px;
ul.prod-dd-list {
height: 200px !important;
li {
display: block;
float: left !important;
height: 50px !important;
position: relative;
width: 100% !important;
div, a {
/*display: inline-block;*/
float: left;
/*position: relative !important;*/
}
}
}
}
&:hover .price-list {
display: block;
/*position: absolute;*/
}
&:hover a {
background-color: $corporate-color;
color: #FFF;
}
}
}
}
}
The issue can be observed on the following URL where the lower part of the overlapping div does not extend beyond its parent container: (go to the last 3 products and hover "VER PRECIOS"). It won't display the lower part of the div that surpasses the whole product container.
Any insights on what might be causing this?
Thank you for your help!