Oke, banyak cara untuk membuat menu drop down. Maksudnya menu drop down adalah, apabila kita melakukan hover pada menu, maka sub menu nya akan tampil ke bawah. Bagaimana kalau kita ingin menyamping? Ups, ntar dibahas lain kali ya, sekarang fokus yang ke bawah dulu :D

Adapun contohnya bisa dilihat di: http://contoh.aaezha.com/pure-css-drop-down.html.

Preview Drop Down Menu
Spoiler for preview: 


Okay, mari kita bahas baris per baris CSS-nya :)

Berikut kode HTML lengkapnya:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Drop Down Menu</title>
<style type="text/css">
/* -------------------- styling body  ---------------------- */
body,td,th {
 font-family: Arial, Helvetica, sans-serif;
}
/* -------------------- styling keseluruhan menu drop down  ---------------------- */
ul {
    margin:0;
    padding:0;
}
.dc{
    display:inline;
    position: relative;
    z-index: 0;
    margin:0;
    padding:0;
}
.dc:hover{
    background-color: transparent;
    z-index: 50;
}
.dc ul{
    position: absolute;
    width:120px;
    background-color: #999;
    left: -1000px;
    list-style-type:none;
    visibility: hidden;
}
.dc:hover ul{
    visibility: visible;
    top: 16px;
    left:0px;
}
/* -------------------- pengaturan submenu drop down nya  ---------------------- */
.dc ul li{
    margin:0;
    padding:0;
    background-color: #EBEBEB;
    margin:1px;
}
.dc ul li:hover {
    background-color: #FFF;
    margin:1px;
}
/* -------------------- tampilan hover pada submenu drop down  ---------------------- */
.dc ul li a {
    display:block;
    padding:4px;
    font-size:12px;
}
.dc ul li a:link {
    color: #333;
    text-decoration: none;
}
.dc ul li a:visited {
    text-decoration: none;
    color: #000;
}
.dc ul li a:hover {
    text-decoration: none;
    color: #333;
}
.dc ul li a:active {
    text-decoration: none;
    color: #333;
}
/*      selesai        */
</style>
</head>
<body>
<div class="dc">
<a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="dc">
<a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
</body>
</html>
Nah, kira-kira seperti itu cara membuat menu drop down murni dengan CSS, tidak memakai javascript, jquery atau lainnya