membuat menucontainer

hai hai semua apa kabarmu hari ini?semoga baik selalu,,,pagi yang indah ini saya mau bagi2 buat sobat blogger nihh,tentang pembuatan sebuah menucontainer/apalah namanya yaitu menu horizontal yang ketika cursor diarahkan/melintas di menu tsb maka akan ada sub menu lagi dibwahahnya seperte punya sata diatas
kenapa saya suka sekali menu ini?karena dapat menghemat banyak tempat sehingga tempat dapat dimanfaatkan dengan maksimal,untuk widget lain,,ahhh langsung aja yaa

buka blogger edit template beri tanda cek pada expand templete widget
lalu cari aja kode ini ]]></b:skin>
copy script dibawah yang berwarna biru copy diatas ]]></b:skin> tadi
#catmenucontainer{

height:33px;
width:950px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9p5xrb0Qql478-YyjXVRDeDiRnP41EWf3M3gKMA_s-jKBs-_B4L_iBfWbp02a68C54pVb8N6As6_Utuf9rsn1xXxhXPS3YFFxjlznhQEH25w3-r4E3ShVm2IixEFLftxo6I6ACjVQdCS/) 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:950px;
background:#1be811 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9p5xrb0Qql478-YyjXVRDeDiRnP41EWf3M3gKMA_s-jKBs-_B4L_iBfWbp02a68C54pVb8N6As6_Utuf9rsn1xXxhXPS3YFFxjlznhQEH25w3-r4E3ShVm2IixEFLftxo6I6ACjVQdCS/) 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/AVvXsEhY9p5xrb0Qql478-YyjXVRDeDiRnP41EWf3M3gKMA_s-jKBs-_B4L_iBfWbp02a68C54pVb8N6As6_Utuf9rsn1xXxhXPS3YFFxjlznhQEH25w3-r4E3ShVm2IixEFLftxo6I6ACjVQdCS/) repeat-x;
color: #bc040d;
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:#bc040d;
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 #010000;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9p5xrb0Qql478-YyjXVRDeDiRnP41EWf3M3gKMA_s-jKBs-_B4L_iBfWbp02a68C54pVb8N6As6_Utuf9rsn1xXxhXPS3YFFxjlznhQEH25w3-r4E3ShVm2IixEFLftxo6I6ACjVQdCS/) repeat-x;
color: #000000;
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;
}

ingat copy kode diatas kode ]]></b:skin>

4. cari ( <div id="content-wrapper"> )
5.lalu copy aja script dibawah ini paste dbawah <div id="content-wrapper">

<div id='outer-wrapper'>
<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='#/'>Home</a></li>

<li><a href='#'>Softwares</a>
<ul class='children'>
<li><a href='http://www.tranianggoro.co.cc/search/label/audio%20n%20video'>audio-video</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>images</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/internet'>internet</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/security'>security</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/utilities'>utility</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/office'>office</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/portable'>portable</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/desktop'>desktop</a></li>

</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>tips n trick</a>
<ul class='children'>
<li><a href='http://www.tranianggoro.co.cc/search/label/trik%20komputer'>komputer</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/blogger'>blogger</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/hack'>hacking</a></li>
<li><a href='http://www.tranianggoro.co.cc/search/label/handphone'>handphone</a></li>
</ul>
</li>

<li><a href='#'>blog friends</a>
<ul class='children'>
<li><a href='http://tranianggoro.wordpress.com'>anggoro</a></li>

</ul>
</li>

<li><a href='http://www.tranianggoro.co.cc/search/label/game'>GAME</a>
<ul class='children'>
<li><a href='http://tranianggoro.wordpress.com'>game besar</a></li>
<li><a href='http://madinnadina.wordpress.com'>game kecil</a></li>
<li><a href='http://madinnadina.wordpress.com'>game portable</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>daftar isi</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>4</a></li>
</ul>
</li>

<li><a href='http://www.tranianggoro.co.cc/search/label/operasi%20sistem'>Operasi Sistem</a>
<ul class='children'>
<li><a href='http://www.tranianggoro.co.cc/search/label/windows'>Windows</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Linux</a></li>
</ul>
</li>

<li><a href='http://www.tranianggoro.co.cc/search/label/uncategorized'>uncategorized</a></li>

</ul>

</div>
</div>

terakhir save dan lihat perubahan pada blog anda
nb : script warna hijau adalah untuk panjang menu ubah sesuai ukuran blog anda