Membuat Dropdown Dengan HTML5 dan CSS3

Dropdown bisa dibilang sebagai sub menu atau sub item yang berguna untuk memperpendek menu navbar atau menampilkan menu dengan klik tombol, dropdown bisa dibuat pada navbar, button, tabs, select, conteks menu dan lain-lain, Dropdown yang lebih sering digunakan pada navbar.

Cara membuat dropdown adalah sebagai berikut: pertama buatkan file html dengan nama index.html dan simpan dimana saja kemudian copy pastekan kode dibawah ini kedalam index.html, untuk kode seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Simple Dropdown</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
  <div class="dropdown left">
    <button class="btndown">Left</button>
    <div class="wrapdown wrapleft">
      <a href="#">Item Link 1</a>
      <a href="#">Item Link 2</a>
      <a href="#">Item Link 3</a>
      <a href="#">Item Link 4</a>
      <a href="#">Item Link 5</a>
    </div>
  </div>
  <div class="dropdown right">
    <button class="btndown">Right</button>
    <div class="wrapdown wrapright">
      <a href="#">Item Link 1</a>
      <a href="#">Item Link 2</a>
      <a href="#">Item Link 3</a>
      <a href="#">Item Link 4</a>
      <a href="#">Item Link 5</a>
    </div>
  </div>
</div>

</body>
</html>

Selanjutnya adalah pengaturan desain pengayaan dengan menggunakan css dengan cara buatkanlah file css baru dengan nama style.css dan gunakan kode dibawah ini serta simpan file css bersamaan dengan index.html, untuk kode seperti dibawah ini.

body{
  font-family:helvetica,sans-serif,arial;
}
.btndown{
  background-color: #3bb09f;
  color: #fff;
  padding: 16px;
  font-size: 14pt;
  border:none;
  cursor: pointer;
}
.dropdown{
  position: relative;
  display: inline-block;
}
.wrapdown{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 124px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.wrapdown a{
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.wrapdown a:hover{
  background-color: #f1f1f1;
}
.dropdown:hover .wrapdown{
  display: block;
}
.dropdown:hover .btndown{
  background-color: #4cbf50;
}
.left{
  float: left;
}
.right{
  float:right;
}
.wrapleft{
  left:0;
}
.wrapright{
  right:0;
}
.container{
  width:400px;
  margin:20px auto;
}

Selesai, jalankan file html dengan cara klik dua kali pada file html atau klik kanan pada index.html kemudian pilih open with > firefox/browser.