Membuat Menu Dropdown Dengan CSS

Dalam sebuah aplikasi berbasis web atau website kita sangat membutuhkan yang namanya menu, karena dengan adanya menu di aplikasi yang kita buat dapat memudahkan user / pengguna untuk pergi ke halaman yang diinginkan.


Pada kesempatan kali ini kita akan mencoba membuat contoh pembuatan menu dropdown yang sederhana dengan bantuan CSS. Pertama buatlah tag list HTML seperti berikut

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a></li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Pada kode diatas akan terbentuk 5 buah menu. Jika kita menginginkan submenu atau anak dari menu diatas kita tambahkan tag list baru di dalam list yang tadi kita buat, seperti berikut,

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a>
     <ul>
          <li><a href="#">Mancanegara</a></li>
          <li><a href="#">Nasional</a></li>
          <li><a href="#">Olahraga</a></li>
     </ul>
 </li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Setelah kode html tadi kita buat, saatnya kita menambahkan CSS untuk membuat list tadi menjadi menu yang kita inginkan. Sebagai contoh tuliskan sintak CSS seperti berikut

#menu{

   padding: 0;

}

#menu li{

  float: left;
  background: #4679BD;
  border: 1px solid #939C8A;
  list-style-type: none;

}

#menu li ul{

   display: none;

}

 #menu li a{

    text-decoration: none;

    display: block;

    padding: 10px;

    color: #edffec;

    font-family: tahoma;

}

#menu li a:hover{

   background: black;

}

#menu li:hover ul{

   display: block;

   position: absolute;

}

#menu li:hover li{

   float: none;

}

#menu li ul{

   padding: 0px;

}

Setelah dibuatkan CSS nya seperti diatas, maka hasilnya akan seperti gambar berikut,

Untuk lebih jelas bisa lihat contoh pada link berikut