下拉菜单对齐

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;对每个列表元素都特别重要，因为这是用来放置下拉菜单的地方。