Membuat Menu Dropdown Horizontal Simple Menggunakan CSS

Apa Itu Menu Dropdown ?

Apa sih menu dropdown itu ? Menu dropdown adalah menu yang jika kita mengarahkan cursor dapat memunculkan submenu dari menu utama tersebut. Misal kita memiliki menu "Program Keahlian", nah di dalam menu tersebut terdapat submenu, misalnya "Teknik Komputer & Jaringan", maka apabila kita mengarahkan kursor ke menu "Program Keahlian" maka akan muncul Submenu "Teknik Komputer & Jaringan".

Menu Dropdown ada dua jenis yaitu, horizontal dan vertikal. Dropdown Horizontal adalah menu dropdown yang menjulur kebawah, sedangkan menu dropdown vertikal adalah menu yang muncul di samping menu utama.

Cara Membuat Menu Dropdown Horizontal 

 Untuk membuat menu dropdown ikuti langkah - langkah berikut ini

script html

<nav class="menu">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">Program Keahlian</a>

            <ul class="submenu">

                <li><a href="#">Teknik Komputer Dan Jaringan</a></li>

                <li><a href="#">Teknik Audio Video</a></li>

                <li><a href="#">Teknik Pemesinan</a></li>

                <li><a href="#">Teknik Instalasi Tenaga Ringan</a></li>

                <li><a href="#">Teknik Kendaraan Ringan</a></li>

                <li><a href="#">Teknik Sepeda Motor</a></li>

            </ul>

        </li>

        <li><a href="#">Ekstrakulikuler</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact Us</a></li>

    </ul>

</nav>

Perhatikan pada <ul class="submenu"> , itu adalah bagian submenu, nah bagian yang nantinya akan di sembunyikan.

script css

.menu {

    font-family:arial;

    font-weight:bold;

    width:980;

    background:linear-gradient(top, #333, #222);

    background:-webkit-linear-gradient(top, #333, #222);

    background:-moz-linear-gradient(top, #333, #222);

    border-radius:5px;

    font-size:14px;

}

.menu ul {

    padding:0;

    margin:0;

}

.menu ul li {

    list-style:none;

    display:inline-block;

}

.menu ul li a {

    display:block;

    text-decoration:none;

    padding:20px;

    color:#ddd;

}

.menu ul li a:hover {

    background:linear-gradient(top, #222, #333);

    background:-webkit-linear-gradient(top, #222, #333);

    background:-moz-linear-gradient(top, #222, #333);

    color:#fff;

}

.menu ul li .submenu {

    display:none;

}

.menu ul li:hover .submenu {

    display:block;

    position:absolute;

    background:linear-gradient(top, #333, #111);

    background:-webkit-linear-gradient(top, #333, #111);

    background:-moz-linear-gradient(top, #333, #111);

    padding:10px;

}

.menu ul li:hover .submenu li {

    display:block;

}

.menu ul li:hover .submenu li a{

    padding:10px;

    border-radius:5px;

    margin-bottom:5px;

}

.menu ul li:hover .submenu li a:hover {

    background:#222;

    box-shadow:inset 0px 0px 5px #000;

}

Penjelasan

• .menu ul li {list-style:none;  display:inline-block;} , script tersebut berfungsi untuk membuat list "<li>" menjadi berderet.  
• Coba perhatikan script .menu ul li .submenu{display:none} , display none berfungsi untuk menyembunyikan objek, jadi submenu di atas di sembunyikan. 
• Lalu apa yang membuat submenu itu muncul ketika mouse di arahkan ke menu utama ?  Coba anda perhatikan .menu ul li:hover .submenu {display:block;} , ini adalah inti dari semuanya, li:hover berfungsi jika element "li" di sentuh maka .submenu yang tadi nya display:none; menjadi display:block;, itulah yang membuat submenu muncul ketika menu utama disentuh.