Pelajari cara membuat dropdown menu menggunakan HTML dan CSS untuk navigasi yang interaktif.

CSS Dropdowns

Dropdown menu memungkinkan pengguna memilih salah satu opsi dari daftar yang tersembunyi. Umumnya digunakan dalam navigasi untuk menyederhanakan tampilan menu.

Menggunakan HTML dan CSS tanpa JavaScript.

<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
 
  .dropdown-content a:hover {
    background-color: #ddd;
  }
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
 
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
</style>
 
<div class="dropdown">
  <button class="dropbtn">Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<style>
  .navbar {
    overflow: hidden;
    background-color: #333;
  }
 
  .navbar a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  .dropdown {
    float: left;
    overflow: hidden;
  }
 
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
 
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {
    background-color: #ddd;
  }
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
 
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

Gunakan dropdown untuk menampilkan gambar saat hover.

<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    margin-top: 8px;
    z-index: 1;
  }
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
 
<div class="dropdown">
  <button>Hover to Show Image</button>
  <div class="dropdown-content">
    <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Preview" />
  </div>
</div>

Tips:

Pastikan dropdown berada dalam elemen yang memiliki position: relative.
Gunakan z-index untuk memastikan dropdown tidak tertutupi elemen lain.
Tambahkan transisi atau animasi untuk pengalaman pengguna yang lebih halus.

CSS Dropdowns

CSS Dropdowns

1. Dropdown Menu Sederhana

2. Dropdown di Dalam Navbar

3. Dropdown Image

Tips:

On this page