I am working on a feature where the customer's shopping cart is displayed when they hover over "My Cart." I plan to achieve this effect using CSS, but I have encountered an issue with the size of .cart causing .my-cart to stretch...
update
The previous issue has been resolved. However, the hover effect for .my-cart:hover does not work as expected when moving the mouse from .my-cart to .cart. Since .cart is contained within .my-cart, it should not behave in that manner.
.tab {
position: relative;
float: left;
margin-left: 10px;
}
.my-cart .cart {
position: relative;
visibility: hidden;
top: 0;
right: 136px;
z-index: 2;
width: 450px;
padding: 8px;
}
.my-cart:hover .cart {
visibility: visible;
}
<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>