无法对齐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/