下拉菜單對齊

Question

即時通訊嘗試創建我自己的純CCS + HTML下拉菜單。但下拉部分被錯誤地分配，您可以在頁面http://demo.dryga.com上看到。

CSS：

#header-container > ul { 
    float: right; 
    padding: 6px 0 0 0; 
} 

#header-container > ul > li { 
    display: inline; 
} 

#header-container > ul > li > a { 
    display: block; 
    float: left; 
    margin-left: 30px; 
    padding: 7px; 
} 

.language-selector > a { 
    background:url('/images/arrow.png') no-repeat scroll right center; 
    width: 60px; 
} 

.language-selector > ul { 
    position: absolute; 
    clear: both; 
} 

.language-selector > ul > li { 
    display: block; 
} 

HTML：

<ul> 
    <li><a href="/">О программе</a></li> 
    <li><a href="/videos/list.html">Курс</a></li> 
    <li><a href="/faq.html">Помощь</a></li> 
    <li><a href="/contacts.html">Контакты</a></li> 
    <li class="language-selector"> 
     <a>Русский</a> 
     <ul> 
      <li><a>English</a></li> 
      <li><a>Deutch</a></li> 
     </ul> 
    </li> 
</ul> 

如何對齊最後一個菜單項下的那部分？

Answer 1

你可以試試這個CSS：

.language-selector > ul { 
    position: absolute; 
    clear: both; 
    top: 35px; 
    left: 37px; 
} 

#header-container > ul > li { 
    display: inline; 
    float: left; 
    position: relative; 
} 

它應該做的伎倆！

position: relative;對每個列表元素都特別重要，因爲這是用來放置下拉菜單的地方。