jQuery切換底部div顯示到左邊不正確

我知道這一定是一個簡單的修復，但我花了早上的一大部分努力尋找解決方案（在發佈之前）無濟於事。jQuery切換底部div顯示到左邊不正確

我有一個非常簡單的jQuery「slideToggle」腳本，點擊後，將div的按鈕滑動到我希望顯示的高度。它適合我想要的寬度（400px），從頂部div尺寸（130px）的左側開始並向右延伸。問題是，我需要它向左延伸（頂部的「按鈕」設置在頁面的最右側，並從頁面延伸）。這裏是我的代碼：

<script src="js/jquery-1.9.1.min.js"></script> 
    <script src="js/jquery.easing.1.3.js"></script> 
    <style type="text/css"> 
    #cartBox { 
     width: 110px; 
     height: 90px; 
     position: absolute; 
     margin-left: 90%; 
     top: 28px; 
     border: 3px solid #800000; 
     background-color: #800000; 
     border-radius: 12px; 
     z-index: 999; 
    } 
    #cartDropMenu { 
     position:absolute; 
     z-index:999; 
     width: 130px; /* width of top items (img + text (Cart Items) */ 
     float:right; 
     top: 0px; 
     right: 0px; 
     color: white; 
     font-family: Arial, Helvetica, Sans serif; 
     font-size: 12px; 
     text-align: left; 
    } 
    #cartDropMenu p { 
     margin:0; 
     padding-left:24px; /* moves text to the left of img */ 
     cursor:pointer; 
     background-image:url('../img/open.png'); 
     background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter) */ 
     background-repeat:no-repeat; 
     text-align: left;  
    } 
    #cartDropMenu p.close { 
     background-image:url('../img/close.png'); 
    } 
    #DropMenu { 
     position:absolute; 
     z-index:999; 
     background-color:#fff; 
     border:solid 1px rgb(220,220,220); 
     padding:12px; 
     width:400px; /* width of drop down box */ 
     box-shadow:1px 1px 4px rgb(220,220,220); 
     top:90px; /* position of start point for drop down box */ 
     left:8000; /* ??? */ 
     display:none; 
     color: black; 
     font-family: Arial, Helvetica, Sans serif; 
     font-size: 12px; 
    } 
    </style> 
    <script> 
    $(document).ready(function() { 
     $('#cartDropMenu p').click(function() { 
       $('#DropMenu').slideToggle(300); 
       $(this).toggleClass('close'); 
      }); 
     }); // end ready 
    </script> 
</head> 
<body> 
      <div id="cartBox">   
       <div id="cartDropMenu"> 
        <p> &nbsp&nbsp&nbsp&nbsp Display Cart</p> 
        <div id="DropMenu"> 
         Test line #1<br /> 
         Test line #1<br /> 
         Test line #1<br /> 
         Test line #1<br /> 
         Test line #1<br /> 
         Test line #1<br /> 
         Test line #1<br /> 
         Test line #1<br /> 
        </div>  
      </div> 
     </div> 
    </body> 
</html>

下面就來jfiddle鏈接： enter link description here

來源

2014-03-19 user3018152