0 Cara Membuat Drop Down Menu CSS

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Drop Down Menu dengan menggunakan CSS ini
pembuatannya amat mudah namun hasilnya tidak kalah
dengan Drop Down Menu lain yang sejenisnya.

Anda lihatlah previewnya yang seperti di atas
dan bila Anda berminat mencoba, ikutilah langkah
cara membuatnya yang seperti berikut ini :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini lalu simpan.

<div id="access">
<ul id="level-one">
<li><a href="URL nama blog Anda">Home</a></li>
<li>Menu Item A
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item B
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item C
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item D
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item E
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item F</li>
<li>Menu Item G</li>
</ul>

</div>

KETERANGAN :

Gantikah kata Menu Item A sampai G

dengan kata yang Anda kehendaki.

Masukkan URL link Anda yang ingin

Amda jadikan Menu-menunya.

3.   Lalu masuk ke Edit HTML.

4.   Cari tag </head>

5.   Copy kode berikut dan letakkan
      di atas atau sebelum tag </head> ini
      kemudian Simpanlah template Anda.

<style type="text/css">

ul#level-one{
 width:100%;
 height: 36px;
 position: relative;
 list-style: none;
 line-height:36px;
 background:#f0f0f0 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-back.png) repeat-x bottom left;/* url("http://www.entheosweb.com/tutorials/css/images/menus/grey_bkg.jpg") repeat-x bottom left;/* for non-css3 browsers */
 background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #FFFFFF,  #f0f0f0); /* for firefox 3.6+ */ 
}
ul#level-one li{
 width:100px;
 float: left;
 font-weight: bold;
 font-family: Arial;
 padding-left: 12px;
}
ul#level-one li:hover{
 background:#FFA500;
}
ul#level-two{
 list-style: none;
 background:#FFA500 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF4500', endColorstr='#FFA500'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
 background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */ 
 display:none;
 position:absolute;
 top:36px;
 padding:0;
 width:200px;
 height:245px;
 border:0px solid red;
}
ul#level-two li{
 width:196px;
 padding-left:4px ;
 line-height: 30px;
}
ul#level-two li:hover{
 background:#f0f0f0 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #fff,  #c0c0c0); /* for firefox 3.6+ */ 

}
ul#level-one li:hover > ul#level-two {
 display: block;
}
a{
 width:200px;
 text-align: center;
 text-decoration: none;
 color:#000000;
}

</style>

Selamat mencoba dan tetap good luck!