Membuat Menu Drop down Horizontal

Membuat menu drop down horizntal Ini bertujuan untuk memudahkan pengunjung blog  agar mereka dengan mudah memilih menu yang diinginkannya,

Caranya sebagai berikut:

   1. Login Ke akun Blog Sobat
   2. Pada Halaman Dasbor Sobat Pilih  Rancangan/Tata Letak/Design --> Edit HTML
   3. Cari Kode ]]></b:skin> (Tekan CTRL F/F3 untuk Mempermudah Pencarian)
   4. Masukan Kode Berikut Tepat Diatas Kode ]]></b:skin>

#catmenucontainer{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdbsvQYBL9t_guE_dL-5w6EPm-BgLdaivj3TlBOVkMLojCHu9RjkR-Ms4xi40_7ykWdG6ZvhF9vd7tEx8G0F15DkghsdAwwxUGggv2f4inQn_aschJym996fqvctQLMojyIKwVeTrbEGAM/) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}



#catmenu{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdbsvQYBL9t_guE_dL-5w6EPm-BgLdaivj3TlBOVkMLojCHu9RjkR-Ms4xi40_7ykWdG6ZvhF9vd7tEx8G0F15DkghsdAwwxUGggv2f4inQn_aschJym996fqvctQLMojyIKwVeTrbEGAM/) repeat-x;

height:33px;

}



#catmenu ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}



#catmenu li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}



#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}



#catmenu li a:hover, #catmenu li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3K0Bd3YkaunvI89h-T7GDhLIoFQ-BJI71bYpfbs483Nk3M0mnywtj86mYa1ocjX0Km2XQltqAP_Fysfin8pp4CURrlPWSdrPdGs7rlLE7a4A7TSDfr4YzKBoghdb1f8W9gWT60DrZZMK8/) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}



#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;



}



#catmenu li li a:hover, #catmenu li li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3K0Bd3YkaunvI89h-T7GDhLIoFQ-BJI71bYpfbs483Nk3M0mnywtj86mYa1ocjX0Km2XQltqAP_Fysfin8pp4CURrlPWSdrPdGs7rlLE7a4A7TSDfr4YzKBoghdb1f8W9gWT60DrZZMK8/) repeat-x;

color: #fff;

padding: 9px 10px 10px 10px;

}



#catmenu li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}



#catmenu li li {

}



#catmenu li ul a {

width: 140px;

}



#catmenu li ul a:hover, #catmenu li ul a:active {

}



#catmenu li ul ul {

margin: -34px 0 0 170px;

}



#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {

left: -999em;

}



#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,

#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {

left: auto;

}



#catmenu li:hover, #catmenu li.sfhover {

position: static;

}

5.Setelah itu copy code dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>

<div id='catmenucontainer'>

<div id='catmenu'>



<ul>

<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>

</ul>

</li>

Okey selamat mencoba.thaks..............