ドロップダウンメニューの整列

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;は、ドロップダウンメニューの配置に使用されるすべてのリスト要素で特に重要です。