Hilfe bei der relativen Positionierung

Question

Ich versuche, den Warenkorb des Kunden anzeigen zu lassen, wenn sie die Maus über Mein Warenkorb bewegen. Ich mag CSS für diesen Effekt verwenden, aber ich bin in ein Problem laufen, wo .cart.my-cart verursachen die Größe .cart zu strecken ...

Update

das ist nun fest, aber die .my-cart:hover Effekt gilt nicht, wenn ich mouseOut von .my-cart und in .cart ... da .cart innerhalb von .my-cart ist, sollte es nicht, dass

.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

Sie tun Setzen Sie absolute positionierte Elemente in relative positioniert, so dass es relativ zu seinem übergeordneten positioniert ist (oder das erste Elternteil, das eine Position hat: relativ). Oben/unten und rechts/links können nur in der Position verwendet werden: absolute Elemente.