Help with relative positioning

I'm trying to have the customer's shopping cart display when they mouse over My Cart. I'd like to use CSS for this effect but I'm running into an issue where .cart is causing .my-cart to stretch to the size of .cart...

update

Now that's fixed, but the .my-cart:hover effect does not apply when I mouseout of .my-cart and into .cart... since .cart is inside of .my-cart it shouldn't be doing that

.tab {
    position: relative;
    float: left;
    margin-left: 10px;
}
.my-cart .cart {
    position: relative;
    visibility: none;
    top: 0;
  开发者_Python百科  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>

---

You put absolute positioned elements in relative positioned ones, so that it's positioned relative to its parent (or the first parent that has a position:relative). Top/bottom and right/left can only be used in the position:absolute elements.