Drop down menu tanpa javascript

14:50 Unknown 2 Comments

Demo

element HTML :

<ul class="parent">
    <li><a href="#">Menu 1</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="pc-mode.blogspot.com">Menu 3</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu 1</a></li>
        </ul>
    </li>
</ul>

Code CSS :

ul li{
    list-style:none; /*menghilangkan titik(list bullet)*/
}
ul.parent > li{
    padding:0 10px 0 10px;
    display:inline; /*agar menu horisontal(sejajar)*/    
    position:relative; 
}
ul.parent li:hover ul.sub-menu{
    visibility:visible; /* saat mouse di atas menu class .sub-menu akan terlihat*/
}
ul li a{
    text-decoration:none;/*menghilangkan underline di link*/
}
ul.sub-menu{
    position:absolute;
    width:200px; /*mengatur lebar seb-menu*/
    padding-left:0; /*menghilangkan adding sebelah kiri*/
    visibility:hidden; /*menyembunyikan sub-menu*/
}

Hal yang paling berperan dalam code tersebut sebenarnya adalah penggunaan property Position dan visibility . Pada ul dengan class parent kita beri nilai relative dan ul dengan class sub-menu kita beri position:absulute , yang artinya element tersebut dapat menutupi element lain,dan kita beri property hidden agar element tersebut tidak terlihat. Saat di hover akan muncul karena kita beri property visible .

View On jsFiddle