Cara Membuat Drop Down Menu dengan HTML dan CSS

| No comment
Beberapa hari lalu ada seorang teman yang bertanya kepada saya, bagaimana sih caranya
membuat drop down menu seperti yang ada di blog panduaji.net ini. Tidak mungkin saya
menjawabnya melalu chat, karena ada beberapa langkah yang cukup panjang. Untuk itu saya
putuskan untuk menuliskannya dalam sebuah postingan blog. Itung-itung buat nambah
postingan blog :D

Saya akan membagi tutorial ini menjadi dua langkah, yang pertama membuat daftar link
dalam bentuk html dan yang kedua akan membuat kode css untuk merubah tampilan html
tersebut supaya bisa menjadi sebuah menu drop down.

Membuat Menu Dalam HTML

Saya menggunakan list UL dan LI dalam pembuatan menunya, copy paste saja kode di
bawah ini untuk membuat sebuah menu. Pada file html tersebut saya menggunakan tag nav
untuk navigasi menu. Ini merupakan salah satu tag baru yang ada di html5

<nav>
<ul>
<li><a href="link home">Home</a></li>
<li><a href="link about">About</a>
<ul>
<li><a href="link contact">Contact</a></li>
<li><a href="link email">Email</a></li>
</ul>
</li>
</ul>
</nav>

Dengan kode diatas, drop down akan muncul ketika kita arahkan kursor ke menu about.
Setelah itu ketika kamu simpan file diatas akana tampak seperti gambar di bawah ini.

Menu
Selanjutnya kita akan membuat sebuah css untuk membuat menu tersebut tampak lebih cantik
dengan fitur dropdown nya.

Membuat Efek Drop Down Menggunakan CSS

Selanjutnya masukkan kode css untuk mengubah tampilan menu diatas. Ada banyak cara
yang bisa kamu gunakan untuk itu. Oleh karena itu silakan baca tulisan saya yang berjudul
Kenalan dengan CSS untuk memilih mana yang paling cocok untuk kamu.
Tahap pertama sebelum membuat dropdown adalah mengubah arah menu menjadi horizontal.
Gunakan kode css di bawah ini

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef; /*background menu*/
padding: 0 20px;
list-style: none; /*menghilangkan titik pada list*/
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
}
nav ul li:hover {
background: #6398DA; /*mengubah warna saat mouse berada diatasnya*/
}
nav ul li:hover a {
color: #fff; /*mengubah warna link saat mouse berada diatasnya*/
}

nav ul li a {
display: block; padding: 25px 40px; /*pengaturan link */
color: #666; text-decoration: none;
}

nav ul ul {
background: #6398DA; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #dfdfdf;
}
Saya bingung menjelaskan setiap bagiannya. Kamu coba simpan saja file tersebut kemudian
coba buka di browser dan pelajari masing-masing fungsinya menggunakan inspect element di
browser seperti chrome maupun firefox. Coba ubah parameternya supaya kamu bisa tahu
masing-masing fungsi kode diatas.

Semoga tutorial singkat ini bisa membantumu dalam belajar membuat drop down menu
dengan html dan css.