基於CSS的絕對定位UL對齊需要幫助（下拉效果）

Question

我正在嘗試在本網站中使用語言切換系統。這個想法是有一個SPAN，懸停後顯示一個下拉框（基於UL），其中包含可用語言的列表。以下是我試圖達到的效果的快照。

alt text http://img337.imageshack.us/img337/3474/dropboxfinal.png

下拉框實際上是默認隱藏的無序列表。在跨度上盤旋時，我可以看到UL。這是HTML和CSS。

HTML

<span id="langswitch">Language↓ 
    <ul id="langlist"> 
     <li class="en"> 
      <a title="Current language: English" href="http://domain/en"> 
       <img width="16" height="13" alt="English Language" src="flag-en.gif" /> 
       English 
      </a> 
     </li> 

     <li class="th"> 
      <a title="Switch to Thai language" href="http://domain/th"> 
       <img width="16" height="13" alt="Thai Language" src="flag-th.gif" /> 
       Thai 
      </a>  
     </li> 

     <li class="zh">   
      <a title="Switch to Chinese language" href="http://domain/zh"> 
       <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
       Chinese 
      </a> 
     <li> 
    </ul> 
</span> 

CSS

ul#langlist { 
    border:1px solid #3399CC; 
    color:#006699; 
    background:#fff; 
    padding:0 !important; 
    width:100px; 
    list-style:none; 
    position:absolute; 
    top:62px; 
    right:0; 
    z-index:100; 
    display:none; 
} 

span#langswitch:hover ul#langlist { display:block; } 

但相反的下拉列表中出現在用我的跨度一致，它的出現在瀏覽器的最右端。這是截圖。

alt text http://img84.imageshack.us/img84/1687/dropbox.png

任何這裏的CSS大師可以推薦這個修復？

謝謝， 米^ E

Answer 1

只需設置「跨度」到「相對的」，設定一個固定的寬度的「跨度」和播放比特具有值「頂部」和位置「左「（應用於#langlist）來管理列表的垂直和水平對齊！

---

EDIT（響應你的問題）：默認情況下，當你在網頁中的元素將具有絕對的位置，它的位置（屬性「頂」和「左」的定義）是相對於html頁面計算的...所以，「左」和「頂」值是原點是左上角的視在座標系統的「x」和「y」座標。

對於網頁頭部的元素來說，沒有問題（絕大多數情況下），但絕對定位在頁面內容中的元素始終鎖定在其位置上，因此它們不隨內容移動如果用戶滾動或調整網頁的大小！

如果設置爲「相對」包含絕對定位標籤的元素的位置（在本例中爲跨度），則相對於此容器計算值「頂部」和「左側」，所以問題是固定！

有關代碼：從技術上講，你不能，如果你的文檔類型是不是HTML5，所以我的建議是考慮使用jQuery的功能應用「顯示「懸停」僞類適用於非鏈接元素：在＃標籤上發生懸停事件時將「阻止」到列表中。但是，你可以糾正你的代碼如下......從#label修改#langlist的「邊距」值管理列表的距離：

<style type="text/css"> 
#container{ 
    position: relative; 
    width:100px; 
} 

#langswitch{ 
    padding: 0px; 
    margin: 0px; 
    list-style:none; 
    position:absolute; 
} 

#langlist { 
    border:1px solid #39C; 
    color:#069; 
    background:#fff; 
    padding:0 !important; 
    margin-top: 2px; 
    width:100px; 
    top:20px; 
    left:0px; 
    display: none; 
} 

#container:hover #langlist{ 
    display:block; 
} 

img{ 
    background-color: #CCC; 
    border: 1px solid black; 
} 
</style> 


<div id="container"> 
    <ul id="langswitch"> 
    <li> 
     <a id="label" href="#">Language↓</a> 
     <ul id="langlist"> 
     <li class="en"> 
      <a title="Current language: English" href="http://domain/en"> 
       <img width="16" height="13" alt="English Language" src="flag-en.gif" /> 
       English 
      </a> 
     </li> 

     <li class="th"> 
      <a title="Switch to Thai language" href="http://domain/th"> 
       <img width="16" height="13" alt="Thai Language" src="flag-th.gif" /> 
       Thai 
      </a>  
     </li> 

     <li class="zh">     
      <a title="Switch to Chinese language" href="http://domain/zh"> 
       <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
       Chinese 
      </a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

注意，這個解決方案行不通的IE6！