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

提前致谢!

Sam 编辑

包含基于 OP 代码的 jsfiddle -> http://jsfiddle.net/uWcLM/

Answer 1

您可以添加 position: relative; 到 li 下拉列表包含在 then position: absolute; + 一些 top 和 left 值以在其中设置 ul 下拉列表.

请参阅我对 Sam 提供给您的 fiddle 所做的改动 http://jsfiddle.net/rlemon/uWcLM/1/