MEMBUAT MENU DROPDOWN DENGAN CSS

kali ini mau berabagi bagaimana cara membuat menu dropdown dengan css yang sangat simple :v
langsung saja

KODE CSS


ul#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}

ul#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#fff;
 background:#666;
 padding:5px;
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#333
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px;
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}

 KODE HTML

tinggal letakkan pada bagian body :v

<ul id="menu">
 <li><a href="#">contoh</a></li>
 <li><a href="#">contoh</a>
  <ul>
   <li><a href="#">contoh</a></li>
  </ul>
 </li>
 <li><a href="#">contoh</a>
  <ul>
   <li><a href="#">Sub Menu</a></li>
   <li><a href="#">Sub Menu</a></li>
  </ul>
 </li>
 <li><a href="#">contoh</a>
  <ul>
   <li><a href="#">Sub Menu</a></li>
   <li><a href="#">Sub Menu</a></li>
   <li><a href="#">Sub Menu</a></li>
  </ul>
 </li>
 <li><a href="#">contoh</a>
  <ul>
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
</ul>