Membuat Menu Horizontal Sederhana

Nah dalam pembahasan Kali ini, saya akan Membuat Menu Horizontal drop down tanpa edit html. Dari pada bersusah payah edit html Mending pakai Tips ini saja " Cepat dan Praktis "

Bagi pemula seperti saya ini, mengedit HtmL susah-susah gampang dan juga memakan waktu untuk di pelajari satu-persatu.

Tapi,.....Kalau anda sudah kenal Apa itu Kode HtmL pasti Anda ketagihan untuk Meng-utak atik nya.  BegituLah pengalaman saya tentang kode html, sedikit demi sedikit saya mengenal kode html.

Dan akhirnya saya bisa, Mengutak atik kode htmL Walau masih banyak kode yang saya tidak mengerti, tapi yang penting saya sudah mengenal apa itu kode html ??....

Oke Dari pada anda kelamaan baca curhatan saya Yuk langsung praktek saja disini :

Langkah pertama :
1. Log in ke blog anda
2. Klik Rancangan / Layout
3. Klik Tambah gadget
4. Pilih html/javascript
5. Kopy paste kode di bawah ini

<style>

/* ================================================================
Editing: SysteM Of BloG
=================================================================== */

#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:200px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 200px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #b60000; border-bottom:1px dashed darkred; border-top:1px dashed gray; text-align:center;}

#menu .one {background: #000; border-top:5px dashed #b60000;}
#menu .two {background: #000; border-top:5px dashed #b60000;}
#menu .three {background: #000; border-top:5px dashed #b60000;}
#menu .four {background: #000; border-top:5px dashed #b60000;}

#menu .one dt {background: black;}
#menu .two dt {background: black;}
#menu .three dt {background: black;}
#menu .four dt {background: black;}

#menu dd {margin:0; padding:0; color: #000; font-size: 1em; text-align:center;}
#menu .one dd {border-bottom:1px dashed darkred;}
#menu .two dd {border-bottom:1px dashed darkred;}
#menu .three dd {border-bottom:1px dashed darkred;}
#menu .four dd {border-bottom:1px dashed darkred;}
#menu dd.last {border-bottom:1px dashed darkred;}

#menu dt a, #menu dt a:visited {display:block; color:green;}

#menu dd a, #menu dd a:visited {color:darkred; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:170px;}

#menu .one dd a {background:black; color:green;}
#menu .two dd a {background:black; color:green;}
#menu .three dd a {background:black; color:green;}
#menu .four dd a {background:black; color:green;}


#menu .one dd a:hover {background: #665; color:#000;}
#menu .two dd a:hover {background: #665; color:#000;}
#menu .three dd a:hover {background: #665; color:#000;}
#menu .four dd a:hover {background: #665; color:#000;}

</style>

   <ul id="menu"><!-- drop down menu start -->
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="one">
<!-- Alter the links with your own -->
<dt><a href="Link kepala Anda Disini">Nama Link Kepala</a></dt>

 <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
 <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="two">
<dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>

 <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="three">
<dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>

 <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="four">
<dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>

<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
</ul><!-- end of drop down menu -->

Keterangan :

1. - Kode 200 adalah kode lebar, menu atas dan kode lebar menu drop down nya, anda bisa sesuaikan dengan lebar blog anda.
2. - Kode 170 adalah Lebar menu drop down nya, anda sesuaikan bila anda merubah lebar menu atasnya.,
3. - Kode #Link ganti dengan link, atau tidak usah anda ganti juga tidak apa2,
4. - Ganti kode Link Anda Disini dengan Link yang akan anda gunakan.
5. - Ganti kode Nama Link drop down dengan Nama Link Nya
6. - Ganti kode Nama Link Kepala dengan Nama Link Nya juga,

6. Simpan dan lihat hasilnya