Question

正如我上面所说，我无法将下拉菜单对齐到正确的位置。我想要的是下拉父母的项目。

My Menu as Default

当我徘徊在“HOVERTHIS” On Hover state

我需要在父母的子菜单下找到这些子菜单。

这是我的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 - ＆gt; http://jsfiddle.net/uWcLM/

Answer 1

您可以向{@ 1}}添加position: relative;，然后在position: absolute; +一些顶部和左侧值中添加下拉列表以设置其中的ul下拉列表。

看到我对Sam提供的小提琴的改动http://jsfiddle.net/rlemon/uWcLM/1/

Answer 2

关键是制作#templatemo_menu ul li display: inline-block而不是display: inline

然后您可以使用以下命令定位嵌套的ul：

position: absolute;
top: 20px;

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

无法对齐CSS下拉菜单

2 个答案: