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

display: inline-block重要なのは、代わりに#templatemo_menuulliを作成することですdisplay: inline

次に、ネストされたulを次のように配置できます。

position: absolute;
top: 20px;

元のjsfiddleをフォークしました：http：//jsfiddle.net/SE4cD/2/

于 2012-07-22T21:58:17.620 に答える
0

position: relative;ドロップダウンが含まれているliにposition: absolute;+いくつかの上部と左側の値を追加して、その中にulドロップダウンを設定できます。

サムがあなたに提供したフィドルへの私の変更を参照してくださいhttp://jsfiddle.net/rlemon/uWcLM/1/

于 2012-07-22T21:54:13.650 に答える