Css 使DIV超出其容器

我有一个div，只有在有特定的a:hover时才会显示。这可以正常工作，但是这个div应该与其他所有内容重叠，因为它是一种菜单。我已经尝试了所有我能找到的技巧，并尝试了很多没有运气的占有

以下是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 &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>

}

您可以看到它如何不“走出”父容器的url是：（转到最后3个产品并将鼠标悬停在“verprecios”）。它不会显示超过整个产品容器的div的下部

你知道会发生什么吗

---

多谢各位

put

溢出：可见并使用
z-index:
将元素定位在其他元素之上或之下（较高的数字高于较低的数字将
溢出：可见；
放置在保存菜单的容器上，并使用
z-index:
将元素定位在其他元素之上或之下（较高的数字高于较低的数字
将
溢出：可见；
放在保存菜单的容器上，并使用
z-index:
将元素定位在其他元素的上方或下方（较高的数字高于较低的数字
将
溢出：可见；
放在保存菜单的容器上，并使用
z-index:
将元素定位在其他元素的上方或下方（较高的数字高于较低的数字
哦，天哪……我想我试过了，但用的容器不正确（用
代替div）。非常感谢！哦，上帝……我想我试过了，但是用错了容器（用
代替div）。非常感谢！哦，上帝……我想我试过了，但是用错了容器（用
代替div）。非常感谢！哦，上帝……我想我试过了，但是用错了容器（用
代替div）。非常感谢！
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;
            }
        }
    }
}