Cara membuat menu Drop-Down diblog

YahooGlee- Cara membuat Menu Drop down diBlog
Kawan-kawan... Bagaimana kabar semua...?
yah saya yakin keadaan kalian amat sangat baik, karena kalian masih bisa buka Situs Saya ini? iya tidak...?

Nah" lagi-lagi Tips-trik khusus untuk para Blogger, he..he..he..
untuk tips dan trik Komputer dan Tutorial Corel Draw serta Photoshop mungkin lagi belum bisa Update, apalagi dulu ada yang minta Tips-trik untuk Linux, Sorry yah? sampai sekarang Ilmu Komputer 95 belum dapat membuat Tips dan Trik nya dikarenakan saya sendiri belum menggunakan Linux, Masa' harus Copy Paste? he..he..he.. engga'lah...
Semoga kedepan bisa yah?

Demo

Langsung saja dimulai.
Ayo! buka akun Blogspot anda dan segera masuk ke Bagian Rancangan-Edit HTML.

Edit dulu code dibawah ini dan PASTE di Rancangan-Tambah Gadget-HTML Java Script atau Bisa Juga Rancangan-Edit HTML- Dan Cari code berikut ini : <div id='header-wrapper'> 
setelah ketemu Paste code dibawah ini diatas code : <div id='header-wrapper'>

Berikut codenya :

<script src='http://zakariabinsaad.googlecode.com/files/Menu%20Ilmu%20Komputer%2095.js' type='text/javascript'/>
<style>
#menu *{
margin:0px; padding:0px; list-style-type:none; text-decoration:none}
div#menu{position:relative}
#menu ul.menu{ white-space:nowrap}#menu ul.menu li{ display:inline-block; height:57px; position:relative}#menu ul.menu li div{ position:absolute; top:55px; left:0px}#menu ul.menu li div div{ position:absolute; top:-6px; left:176px}#menu ul.menu li div ul li{ display:block; float:none; width:auto; height:auto}#menu ul.menu li a{  padding-left:15px;  background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0gMIT026LTZJDwvYNBSp2ru6WkRm77FuW7bst0inf4_AdCLzymqY6FHLCSO2e5N_kPZhFx0g48Q_25bOOzytSMMKq_qn8j80eVU3ZwveHeA38jddgPW3xMieCi-VrMm_QG5WI3snLcOQ/s1600/menu_level1_item.png&quot;);  background-repeat:no-repeat;  background-position:left -1000px;  display:inline-block;  margin:6px 2px}#menu ul.menu li a span{  padding-right:15px;  padding-left:0px;  background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0gMIT026LTZJDwvYNBSp2ru6WkRm77FuW7bst0inf4_AdCLzymqY6FHLCSO2e5N_kPZhFx0g48Q_25bOOzytSMMKq_qn8j80eVU3ZwveHeA38jddgPW3xMieCi-VrMm_QG5WI3snLcOQ/s1600/menu_level1_item.png&quot;); background-repeat:no-repeat; background-position:right -1000px; display:inline-block; height:40px; line-height:40px; cursor:pointer}#menu ul.menu li:hover a{ background-position:left -90px}#menu ul.menu li:hover a span{ background-position:right -135px}#menu ul.menu li.active a{ background-position:left 0px}#menu ul.menu li.active a span{ background-position:right -45px}#menu ul.menu li div ul li a{ display:block; padding:0px; margin:0px; background:none}#menu ul.menu li div ul li a span{ display:block; padding:0px; background:none; height:auto; line-height:25px; padding:10px 0 10px 12px; white-space:normal}#menu ul.menu li div{  width:194px;  padding-top:6px;  background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBPdCXgGMgWgrZqJxfH6v7MAMkR_lqkdD5HL669ss3YQALp1F3Qy4X_Z1Lw_cCytR1jwNVzJcF58MkHlo2EQZXqr5arBRJTbNonLo_wR3sgVl_SQ1b7ZJwgcWyHNZw8A-ANPvCoxhO_-g/s1600/submenu-top.png&quot;);  background-repeat:no-repeat;  background-position:0px top}#menu ul.menu li div ul{  padding:9px;  padding-top:0;  background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NXe7Hk6EWppJruc0xVsoF0DwpeFEbbXy8z5VyIwB4BNC6ki3CLMxGvXt9ZywVL8aao4H0wbnQIoWx8v4jUOPJ5fB2Y_x6OIDCpmJdUUA3JrgS5EiP8GekpTa1eTGfWlcQfyAdYZJAVor/s1600/submenu-bottom.png&quot;); background-repeat:no-repeat; background-position:0px bottom}#menu ul.menu ul li:hover{  background-repeat:repeat-x;  background-position:0% 100%;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCHEOeK-lYAX43kGJtWPA1uFVNBI8prAKjEx-0b5PGV3oXdEPaWZ2eRSNxduT58nqisypjk9-flnk3MBfpRGzM93F4YgOXlTF1aCSB0R-XK_lJIxQLZJXOr1hCn-RYty32CUELfn7NIog/s1600/menu_level2_item_hover.png)}#menu ul.menu ul li:hover&gt;a{  background-repeat:repeat-x;  background-position:0% 0%;  background-color:transparent;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCHEOeK-lYAX43kGJtWPA1uFVNBI8prAKjEx-0b5PGV3oXdEPaWZ2eRSNxduT58nqisypjk9-flnk3MBfpRGzM93F4YgOXlTF1aCSB0R-XK_lJIxQLZJXOr1hCn-RYty32CUELfn7NIog/s1600/menu_level2_item_hover.png)}
#menu{  height:57px;  padding-left:14px;  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgquaCF0K-ctmESfBnH5oDhdyFgF9sEp2xKRM4P5gUtgqI0e3Ikhgf2pIOjndCLux5kgbcMnV_I5o5Dm3cLUH1-kIezUWfpA41weaVf_bJIQBBT4SSZXcl2jslQVT2SF7mmXrbYNlV-6vIo/s1600/page_header_b.png) repeat-x;
-webkit-border-radius: 20px;-khtml-border-radius: 10px; -moz-border-radius: 20px;border-radius: 10px;}
#menu span{ color:#edf0f1; text-shadow:0 -1px 1px #000}#menu li:hover&gt;a&gt;span { color:#fff; text-shadow:0 1px 1px #000,0 2px 10px #969696}#menu ul.menu li a span{ font-family:Arial; font-size:18px; font-weight:400}#menu ul.menu li div ul li a span{ font-family:Arial; font-size:15px; font-weight:400}#menu ul.menu li div ul{ padding-bottom:8px}#menu ul.menu li div ul li:first-child{ border-top-width:0px}#menu li&gt;div{visibility:hidden}#menu li:hover&gt;div{visibility:visible}/* */#menu ul.menu ul li:hover{ background-color:#393c45}#menu ul.menu li div ul li{ border-bottom:1px solid #70757b; border-top:1px solid #31363b}/* ie7 */#menu ul.menu li{ *zoom:1; *display:inline}#menu ul.menu li a{ *zoom:1; *display:inline}#menu ul.menu li a span{ *zoom:1; *display:inline}#menu ul.menu li div ul li a{ *display:inline}#menu ul.menu ul li:hover{ *background-image:none}#menu ul.menu ul li:hover&gt;a{ *background-image:none}/* IE6 */#menu ul.menu li a{  _background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZ0oZ71b_W0dzIq5mtaFI7RCrbt5t0ptOXcdaOkp5uW3N2MnObRQYD9j0kebWye_wzSwW166o4NEgRufbr3be48xsAXhaMeYNLW59wq66VPM51rCYzA9qJqy8rzlNnrV-gGXDNlB_Q9Vx/s1600/menu_level1_item.gif&quot;)}#menu ul.menu li a span{  _background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZ0oZ71b_W0dzIq5mtaFI7RCrbt5t0ptOXcdaOkp5uW3N2MnObRQYD9j0kebWye_wzSwW166o4NEgRufbr3be48xsAXhaMeYNLW59wq66VPM51rCYzA9qJqy8rzlNnrV-gGXDNlB_Q9Vx/s1600/menu_level1_item.gif&quot;)}#menu ul.menu li div{  _background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNaT16yjGKKQ5f9VtWUxTY3X3-z7u9ZbL2YZr5NtD2aYKrSsi2pvaFHFfa_lHX17YID0-jUC_rklNXpT93Au-Hd21t8oUWYJny-sv6LbjPcJa-lq9ZiSYeaPxAHWqzm0nqOAsRs8cpuob/s1600/submenu-top.gif&quot;);z-index:10}#menu ul.menu li div ul{  _background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMPvW5nUdC-zqS6AmgRKGniSTNB-BCln9dtfRYdopGMMhuBRVAsLoGAxPhKcimgvc2hs5o5jGC28DeMbBo-aXv7zQRzX3EQdo4aoPOXR36RJc_C55IN9haFoeCBK3vs6kakM8ZK5WtqOC/s1600/submenu-bottom.gif&quot;)}#menu ul.menu li a:hover{ _background-position:left -90px}#menu ul.menu li a:hover span{ _background-position:right -135px}#menu div{_display:none}#menu div li:hover div{_display:block}#menu div li:hover li:hover div{_display:block}#menu div li:hover li:hover li:hover div{_display:block}/* */
</style>

<div id='menu'>
<ul class='menu'>
<li><a class='parent' href='#'><span>HOME</span></a>
</li>
<li><a class='parent' href='#'><span>JUDUL1</span></a>
<div><ul>
<li><a class='parent' href='#'><span>JUDUL1.1</span></a>
<div><ul>
<li><a href='#'><span>JUDUL 1.1</span></a>
<div><ul>
<li><a href='#'><span>JUDUL 1.1.1</span></a></li>
<li><a href='#'><span>JUDUL 1.1.2</span></a></li>
<li><a href='#'><span>JUDUL 1.1.3</span></a></li>
<li><a href='#'><span>JUDUL 1.1.4</span></a></li>
</ul></div>
</li>
<li><a href='#'><span>JUDUL 1.2</span></a></li>
<li><a href='#'><span>JUDUL 1.3</span></a></li>
<li><a href='#'><span>JUDUL 1.4</span></a></li>
</ul></div>
</li>
<li><a class='parent' href='#'><span>JUDUL 3</span></a>
</li>
<li><a class='parent' href='#'><span>JUDUL 4</span></a>
</li>
</ul></div>
</li>           
<li><a class='parent' href='#'><span>JUDUL 3</span></a></li>
<li><a class='parent' href='#'><span>JUDUL 4</span></a></li>
<li><a href='#'><span>JUDUL 5</span>
<li class='last'><a href='#'><span>JUDUL 6</span></a></li>
<li class='last'><a href='#'><span>JUDUL 7</span></a></li></a></li>
<li class='last'><a href='http://yahooglee.blogspot.com/'><span>GET THIS</span></a></li>
</ul>
</div>

Penjelasan :

Ganti tanda # dengan URL Anda
Ganti tulisan Judul 1/JUDUL 1.1/JUDUL1.1.2. dsb dengan Judul menu anda.

Bagaimana?
Jika anda kurang memahami segera laporan!
Oke...

Baca dan Pelajari juga yg ini!