Cara Membuat Dropdown Menu Dengan CSS

Cara Membuat Dropdown Menu Dengan CSS

Dropdown Menu merupakan menu yang memiliki menu-menu lainya didalamnya.

Biasanya menu-menu tersebut berada dibawah dropdown menu, dan akan tampil setelah dihover.

Kita dapat membuat dropdown menu hanya dengan CSS.

Berikut hasil akhirnya

Hasil Akhir

Langsung saja berikut tutorialnya.

Membuat Struktur HTML

Seperti biasa kita buat struktur htmlnya. Disini saya membuat sebuah list .menu.

Lalu didalamnya terdapat list, dan juga dropdown menunya.

<ul class="menu">
 <li><a href="">Home</a></li>
 <li><a href="">About</a></li>
 <li class="dropdown"><a href="">Category</a>
  <ul class="dropdown-menu">
      <li><a href="">HTML</a></li>
      <li><a href="">CSS</a></li>
      <li><a href="">PHP</a></li>
      <li><a href="">CPP</a></li>
  </ul>
 </li>
 <li><a href="">Menu</a></li>
</ul>

Save, dan coba buka di broser.

Struktur HTML

Mengatur CSS

Tambahkan beberapa css berikut.

.menu, .dropdown-menu{
 list-style: none;
 margin: 0;
 padding: 0;
}
.menu{
 display: flex;
 background-color: #1771F1;
}
.menu a{
 color: #fff;
 text-decoration: none;
 display: block;
 padding: 15px;
}
.menu a:hover{
 background-color: #0351C1;
}
.menu li{
 position: relative;
}
.dropdown:hover .dropdown-menu{
 display: block;
}
.dropdown-menu{
 display: none;
 position: absolute;
 background-color: #fff;
 box-shadow: 0px 0px 10px #ddd;
 z-index: -1;
 width: 100%;
}
.dropdown-menu a{
 color: #555;
}
.dropdown-menu a:hover{
 background-color: #eee;
}

Save lalu coba buka di browser.

Struktur HTML

Coba kita dekati/hover bagian kategorinya.

Struktur HTML

Maka akan muncul menu dropdownya.

Silahkan kalian kembangkan sendiri, atau kalian ganti warna-warnanya.

Sekian postingan saya, semoga bermanfaat.

Related Post

Comments

X