0 Drop Down Menu

CSS Drop down menu selalu di daftar keinginan setiap pengembang CSS. Membangun menu seperti ini relatif sederhana. Semua yang perlu Anda ketahui adalah CSS selector, floating dan posisi kontekstual. Tutorial ini akan menjelaskan kepada Anda bagaimana membangun Drop Down Menu CSS dengan cara termudah dan anda bisa membayangkan, yaitu dengan mengikuti pendekatan langkah-demi-langkah. Mari kita mulai!

 ganti  / ubah tulisan yang perlu diganti dengan url anda sendiri

HASIL MARKUP HTML : 

<link rel="stylesheet" href="sumber.css" type="text/css"/>
<link rel="stylesheet" href="sumber_li.css" type="text/css"/>
<ul id="navigation">
 <li><a href="#">Home</a></li>
 <li class="sub">
 <a href="#">About</a>
 <ul>
  <li><a href="#">Us</a></li>
  <li><a href="#">Our Work</a></li>
  <li><a href="#">Projects</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Contacts</a>
 </li>
</ul>

 

STYLE SUMBER.CSS :

#navigation {
 margin:0;
 padding:0 1em;
 background:#000;
 height:3em;
 list-style:none;
}
#navigation>li {
 float:left;
 height:100%;
 margin-right:0.5em;
 padding:0 1em;
}
#navigation>li>a {
 float:left;
 height:100%;
 color:#c60;
 text-decoration:none;
 line-height:3;
 font-weight:bold;
 text-transform:uppercase;
}
#navigation>li>a:hover {
 color:orange;
 text-decoration: underline;
}

Untuk Penampakan Sumber_li.CSS silahkan open 

DOWNLOAD | DEMO