Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal

Lagi tutorial blogger sob. tapi apa boleh buat cuma itu yang ada dipikiran saya, kalau mau bantu saya silahkan request.

Srceenshot :

Langkah-langkah Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal :

Masuk ke Dasbor
Rancangan
Edit HTML
Centang Expend Template Widget
Copy Srcipt di bawah ini dan Paste-kan di atas kode ]]></b:skin>

.chromestyle{
width: 90%;
font-weight: regular;
}

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

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

.chromestyle ul li{
display: inline;
}

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

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

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #000000;
border-bottom-width: 0;
font:regular 11px Trebuchet;
line-height:18px;
z-index:100;
background-color: black;
width: 200px;
visibility: hidden;
filter: color=#7CFC00
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #000000;
padding: 5px 0;
text-decoration: none;
text-align: left;
font-weight: regular;
color: Lawngreen;
}

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

Copy Srcipt di bawah ini dan Paste-kan di bawah kode ]]></b:skin>

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

Copy Srcipt di bawah ini dan Paste-kan di bawah kode <body>

<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>


<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>


<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>

Tambahan : Jangan lupa untuk mengganti kode yang seharusnya di ganti

Langkah terakhir lakukan adalah menekan tombol save template. Terima kasih atas atas perhatiannya dan semoga tips membuat menu horizontal ini bermanfaat.

.:Selamat mencoba:.

Buat yang ingin copy paste harap baca aturannya di sini
Cara download di bolg OZY-W di sini

Buat sobat blogger yang suka dengan artikel saya, silahkan anda share/post di mana saja anda suka (Blogger, WordPress, facebook, twitter, dll). Namun, diwajibkan untuk mencantumkan link sumber dari artikel yang sobat blogger share/post (copy/paste). Terima kasih,,,