Membuat Menu Horizontal dengan Sub Menu Vertikal

Hmm... akhirnya selesai juga neh pesanan bung bayu lebond dengan alamat di http://bayulebond.blogspot.com/ atas permintaan postingan cara membuat menu horizontal dengan sub menu vertikal-nya, Maaf ya bung baru aku post hari ini artikelnya ! saya ucapkan semoga bisa anda pergunakan tutorial ini. Bagi yang belum tahu gambarannya seperti apa maksud menu horizontal ini berikut dibawah ini screenshot-nya, apabila ingin memperbesar gambarnya klik pada gambar tersebut ya !

untuk langkah-langkah membuat menu horizontal with drop down perhatikan berikut dibawah ini  :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut (tekan ctrl+F) : ]]></b:skin> kemudian simpan kode berikut diatas kode]]></b:skin>

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #F2F2F2;
width: 100%;
background: #151515
repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #F2F2F2;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #F2F2F2;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: #DF0101
repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #6E6E6E;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #151515;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #848484;
}

Simpan kode berikut dibawah kode ]]></b:skin>

<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>

Simpan kode berikut diatas kode <div id='content-wrapper'> atau dibawah kode </header>

<div class='chromestyle' id='chromemenu'>

<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Menu1</a></li>
<li><a href='#' rel='dropmenu2'>Menu2</a></li>
<li><a href='#' rel='dropmenu3'>Menu3</a></li>
<li><a href='#' rel='dropmenu4'>Menu4</a></li>
<li><a href='#' rel='dropmenu5'>Menu5</a></li>
<li><a href='#' rel='dropmenu6'>Menu6</a></li>
<li><a href='#' rel='dropmenu7'>Menu7</a></li>
<li><a href='#' rel='dropmenu8'>Menu8</a></li>
</ul>
</div>

<!--code sub menu vertikal -->
<div class='dropmenudiv' id='dropmenu1'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>


<!--code sub menu vertikal2 -->
<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

Langkah terakhir lakukan dengan menelan tombol save template. Terima kasih atas atas perhatiannya dan semoga trik membuat menu horizontal ini bermanfaat dan jika ingin memasang menu horizontal dengan drop down support all browser klik disini