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.