Membuat menu drop down dengan CSS

Hai.. kali ini kita akan belajar membuat drop down menu menggunakan CSS dan javascript. Menu drop down ada 2 jenis, (1) Drop Down Vertikal (2) Drop Down Horizontal. Ada 3 file yang harus kita persiapkan :
1. File menu.html
2. File style.css

Standar interface drop down menu lihat contoh dibawah ini

 1. Membuat file menu.html

Perhatikan pada baris ke 4, disana ada script <div id="m1" ..................> kemudian perhatikan baris ke 10 <div id="m2">

Artinya ID tersebut menunjukan perbedaan pada submenu yang akan ditampilkan, tidak boleh ada ID yang sama pada setiap sub menu.Jika kita ingin menambahkan menu yang memiliki sub menu, tinggal tambahkan IDnya menjadi "m3", dst...


2. Membuat file style.css


#sddm
{    margin: 0;
    padding: 0;
    z-index:0;
    }

#sddm li
{    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: 9px tahoma;
    background:#0e4d92;
    }

#sddm li a
{   display: block;
    margin: 0px;
    padding: 6px 15px;
    color: #FFF;
    text-align: center;
    font: 11px tahoma;
    font-weight:bold;
    text-decoration: none}

#sddm li a:hover
{    background: #ee9d3c;
    font: 11px tahoma;
    font-weight:bold;
    text-decoration: none;
    }


#sddm div
{    position: absolute;
    visibility: hidden;
    margin-top: 0px;
    padding: 0;
    font-weight:bold;
    background: #EAEBD8;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    }

    #sddm div a
    {    position: relative;
        display: block;
        margin: 0;
        padding: 5px 15px;
        white-space: nowrap;
        text-align: left;
        font-weight:bold;
        text-decoration: none;
        background: #EAEBD8;
        color: black;
        border-bottom:1px solid #c8c8c1;
        font: 11px tahoma;
        z-index:100;
        }
       

    #sddm div a:hover
    {    background: #49A3FF;
        color: #FFF;
        font-weight:bold;
        font: 11px tahoma;
        z-index:100;
    }
       
       

DOWNLOAD SOURCE
       
       

Another Posts: