Question

As i told above, i can not align the dropdown menu to the right position. What i want is to drop down the items under their parent.

When i hover on “HOVERTHIS”

I need to locate those sub-menus under their parent.

Here is my 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 -->

Here is my 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 */

Thanks in advance!

Edit by Sam

Included jsfiddle based on OP’s code -> http://jsfiddle.net/uWcLM/

Answer 1

You could add position: relative; to the li the dropdown is contained in then position: absolute; + some top and left values to set the ul dropdown within it.

see my alterations to the fiddle Sam provided you http://jsfiddle.net/rlemon/uWcLM/1/