Menu dropdown

Dalam pembuatan menu dropdown dengan menggunakan CSS, properti CSS yang utama digunakan adalah hover, display, dan position. Dengan hover, ketika mouse berada pada Menu Utama maka menu dropdown akan berfungsi yaitu memunculkan submenu dengan bantuan display, sedangkan position gunanya untuk memudahkan penempatan submenu, selain itu bisa ditambahkan properti-properti CSS yang lain yang juga tidak kalah pentingnya

Dibawah ini contoh sederhana script HTML-nya, silahkan dicoba sendiri ya.....

diatur sendiri juga kalau penempatannya kurang pass.. hehe....

<style>
a{ text-decoration: none}
.Menus{background: #666;  color: #fff ;}
.tabmenu{border-right:solid 1px;display:-moz-inline-box}
.Menus li a{ color: #fff }
.Menus ul{border: solid 1px; background: #666; margin-top: 0; display: none; position: absolute; width: 150px;}
.Menus ul a{margin-left: -35px;}
.Menus li:hover ul{ display: block }
</style>
<div class='Menus'>
       <li class='tabmenu'>
         <a href="#">Kategori 1</a>
          <ul>
          <a href="#"&62;Submenu1</a><br/>
          <a href="#"&62;Submenu2</a>
          </ul>
       </li>
</div>

Jika ingin menambahkan tab Kategori lagi, tambahkan seperti yang tampak berwarna hijau dan tempatkan di atas atau di bawahnya namun tetap di dalam div, dan silahkan di ubah style-nya sesuai selera masing-masing.