帮助相对定位

Question

当我们将鼠标悬停在“我的购物车”上时，我正试图让客户的购物车显示出来。我想使用CSS来实现此效果，但我遇到了.cart导致.my-cart拉伸到.cart大小的问题...

更新

现在已修复，但.my-cart:hover效果不适用于我.my-cart和.cart的鼠标输出... .cart位于.my-cart内它不应该这样做

.tab {
    position: relative;
    float: left;
    margin-left: 10px;
}
.my-cart .cart {
    position: relative;
    visibility: none;
    top: 0;
    right: 136px;
    z-index: 2;

    width: 450px;
    padding: 8px;
}
.my-cart:hover .cart {
        visibility: normal;
}

        <ul class='clearfix'>
            <li class='tab my-account'><div>My Account</div></li>
            <li class='tab my-cart'><div>My Cart (0 items)</div>
                        <div class='cart'>asdfasdfasdf</div>
                </li>
        </ul>

Answer 1

您将absolute个定位元素放在relative个定位元素中，以使其相对于其父元素（或具有位置的第一个父元素：相对）定位。顶部/底部和右/左只能用于以下位置：绝对元素。