Make a DIV exceed its container

Problem

I have a div which is shown only when there is a certain a:hover. That works ok, but that div should be overlapping everything else as it is kind of a menu. I've tried all tricks I've been able to find and tried lots of possitionings without luck.

Here's the HTML structure:

<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 &amp; 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 &amp; shipping</p>
                                </div>

                                <a href="http://www.retailer2.com" target="_blank" class="btn-dd-cart">Hello</a>
                            </li>
                                                </ul>
                </div>
            </li>
        </ul>

And here's the corresponding SCSS:

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 url where you can see how it doesn't "go out" of its parent container is: http://melopienso.com/testingtwo/shop/ (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 idea of what may be happening?

Thank you very much!

Problem courtesy of: Jacobo Polavieja

Solution

put overflow:visible; on your container that holds your menu and use z-index: to position elements above or below other elements (higher numbers goes above lower numbers

Solution courtesy of: Pontus Backlund

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.