Cara membuat Menu Dropdown dengan CSS

Kali ini kita akan membahas bagaimana caranya untuk membuat menu dropdown di Blog atau Web anda dengan menggunakan CSS. Efek transisinya akan cukup untuk mempermanis tampilan blog anda dan disini kita tidak akan menggunakan bantuan javascrip sekalipun.\

Membuat Baris Menu

Untuk pertama kali, kita akan membuat struktur HTML untuk menu yang nanti ingin anda tampilkan di web blog anda.

Contoh

<nav>
<ul>
<li><a href="#">Bisnis</a></li>
<li><a href="#">Teknologi</a>
 <ul>
 <li><a href="#">Animasi</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Game</a></li>
<li><a href="#">Others</a></li>
</ul>
</nav>

#Modifikasi sendiri contoh diatas sesuai Menu yang anda inginkan

Tambahkan Code CSS

Setelah Menu anda buat, sekarang saatnya kita untuk menambahkan kode CSS yang berguna untuk membuat tampilan dropdown untuk menu anda.

Kode CSS :

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

Penjelasan 

Beberapa penjelasan untuk kode diatas.

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Kode ini berarti bahwa kode yang mempunya sub menu tidak akan ditampilkan dan hanya akan ditampilkan jika kursor diarahkan ke tombol tersebut.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Kode ini adalah style dari Menu dropdown yang akan tampil. Anda bisa menggantinya sesuai selera dan kebutuhan blog atau web anda agar lebih elegan.
Contoh tampilan dropdown yang sudah dimodifikasi.

Contoh Tampilan Menu Dropdown

Sudah mengerti kan tentang bagaimana caranya membuat menu dropdown. Kurasa cukup sekian saja, semoga anda bisa mengembangkannya dan artikel ini bermanfaat.

Terimakasih.