無法對齊CSS下拉菜單

Question

正如我上面告訴的，我無法將下拉菜單對齊到正確的位置。我想要的是放下他們父母下的項目。

，當我在 「HOVERTHIS」

懸停我需要找到他們的父母下的子菜單。

這裏是我的HMTL：

<div id="templatemo_menu"> 
    <ul> 
      <li><a href="index.php" class="current">Anasayfa</a></li> 
      <li><a href="galeri.php">Galeri</a></li> 
      <li><a href="duyurular.php?duyuru=1">23 Nisan</a></li> 
      <li><a href="urunler.php">Ürünler</a></li> 
      <li><a href="iletisim.php">İletişim</a></li> 
      <li><a href="icerik.php?icerik=3">Okuyun</a></li> 
      <li><a href="urunler.php" onclick="return false;">HOVERTHIS</a> 
       <ul class="alturun"> 
        <li><a href="urunler.php?kat=2">Test Kategori 1</a></li> 
        <li><a href="urunler.php?kat=3">Hizmet Ürünleri</a></li> 
        <li><a href="urunler.php?kat=15">POWDERS</a></li> 
       </ul> 
      </li> 
     </ul>  
    <div class="cleaner"></div> 
</div> <!-- end of templatemo_menu --> 

這裏是我的CSS：

/* menu */ 
#templatemo_menu { 
    clear: both; 
    width: 900px; 
    height: 40px; 
    padding: 0 30px; 
    background:url(images/templatemo_menu.png) 
} 

#templatemo_menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#templatemo_menu ul li { 
    padding: 0px; 
    margin: 0px; 
    display: inline; 
} 

#templatemo_menu ul li a { 
    float: left; 
    display: block; 
    width: 100px; 
    height: 28px; 
    padding: 9px 0 0; 
    margin: 0 1px 0 0; 
    font-size: 14px; 
    text-align: center; 
    text-decoration: none; 
    color: #383838; 
    font-weight: 500; 
    letter-spacing: 1px; 
    outline: none; 
    border: none; 
} 

#templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color: #000; height: 31px; padding: 6px 0 0; background: url(images/templatemo_menu_hover.png) bottom center no-repeat } 

.alturun { 


} 

#templatemo_menu ul li:hover ul { 

    display: block; 
} 
#templatemo_menu ul li ul{ 
    width: 100px; 
    display: none; 
} 

/* end of menu */ 

在此先感謝！

編輯由山姆

基於OP的代碼

包括的jsfiddle - >http://jsfiddle.net/uWcLM/

Answer 1

你可以添加position: relative;到下拉列表包含在隨後position: absolute; +一些頂部和左側值來設置UL李在其中下拉。

看到我的改變山姆只要你http://jsfiddle.net/rlemon/uWcLM/1/

Answer 2

的關鍵是的#templatemo_menu UL李display: inline-block代替display: inline

然後你就可以定位與嵌套UL的小提琴：

position: absolute; 
top: 20px; 

我分叉原來的jsfiddle：http://jsfiddle.net/SE4cD/2/