Cara Membuat Dropdown Menu Dengan HTML Dan CSS

Cara Membuat Dropdown Menu Dengan HTML Dan CSS - Dropdown menu adalah list menu yang muncul ketika kursor datang. Dropdown Menu biasanya digunakan di bagian navbar dalam layout web. Berikut adalah contoh dropdown menu.

Untuk membuat dropdown list anda memerlukan sebuah file HTML dan CSS, dan berikut contohnya.

HTML

<div class="drop-exam">

<ul>

<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li class="dropdown-button"><a href="menu">Menu</a>

<div class="dropdown-menu">

<ul class="dropdown-list">

<li><a href="menu">Menu 1</a></li>
<li><a href="menu">Menu 2</a></li>
<li><a href="menu">Menu 3</a></li>

</ul>

</div>

</li>
<div class="clear"></div>

</ul>

</div>

Save lalu buka file cssnya.

CSS

.drop-exam {

background-color: #ED4C67;
width: 90%;
margin: 50px auto;

}
.drop-exam ul {

list-style-type: none;
margin: 0;
padding: 0;

}
.drop-exam ul li {

float: left;

}
.drop-exam ul li a {

display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;

}
.drop-exam ul li a:hover {

background-color: #12CBC4;

}
.dropdown-button {

position: relative;

}
.dropdown-button:hover .dropdown-menu {

display: block;

}
.dropdown-menu {

transition: all 0.2s;
display: none;
position: absolute;
top: 60px;
left: 0;
background-color: #ED4C67;

}
.dropdown-list li a {

display: block;
width: 100%;
box-sizing: border-box;
width: 150px;

}
.clear {

clear : both;

}

Setelah itu save, dan lihat hasilnya di browser.

Oke itu saja tutorial singkat mengenai dropdown, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Membuat Dropdown Menu Dengan HTML Dan CSS.
Jangan lupa baca postingan saya sebelumnya Cara Menggunakan Font Eksternal Dengan CSS.