Выпадающее меню align

Question

im пытается создать мое собственное раскрывающееся меню 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; особенно важен для каждого элемента списка, поскольку это то, что используется для размещения выпадающего меню.