相対的な位置付けのヘルプ

Question

私は自分のカートにマウスをかざすと、顧客のショッピングカートを表示しようとしています。私は、この効果のためにCSSを使用したいが、私は今では固定だ

.cartが.cartのサイズにストレッチする.my-cartを引き起こしている問題...

更新に実行しているんだけど、私は.my-cartのと.cartにマウスアウト時に.cartがあるので、それはやってはならない.my-cartの内側.my-cart:hover効果が...適用されないこと

.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の位置に配置して、親（または相対位置のある最初の親）を基準にして配置します。上/下、右/左は絶対位置でのみ使用できます。