0

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

我的默认菜单

当我将鼠标悬停在“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/

4

2 回答 2

0

您可以将position: relative;下拉列表添加到 li 中，然后position: absolute;+ 一些顶部和左侧值以在其中设置 ul 下拉列表。

请参阅我对小提琴 Sam 的改动，为您提供http://jsfiddle.net/rlemon/uWcLM/1/

于 2012-07-22T21:54:13.650 回答
0

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

然后你可以定位嵌套的 ul ：

position: absolute;
top: 20px;

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

于 2012-07-22T21:58:17.620 回答