Question

我有一个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>

这是相应的SCSS：

ul.products li.product { 明确：两个！重要; 显示：阻止！重要; margin-bottom：50px！important; 宽度：100％！重要;

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;
            }
        }
    }
}

}

您可以看到它的父容器“外出”的URL是：http://melopienso.com/testingtwo/shop/（转到最后3个产品并悬停“VER PRECIOS”）。它不会显示div的下半部分超过整个产品容器。

对可能发生的事情有所了解？

非常感谢！

Answer 1

将overflow:visible;放在包含菜单的容器上，并使用z-index:将元素放在其他元素的上方或下方（较高的数字高于较低的数字

使DIV超过其容器

1 个答案: