1. Masuk ke Dashboard blog Sobat
2. Pilih menu Template
3. Kemudian klik menu Edit HTML
4. Beri tanda centang Expand Widget Templates
5. Salin kode dibawah ini, diatas kode ]]></b:skin>
.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}
.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #151515;
color: #2d2b2b;
text-decoration: none;}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}
.jqueryslidemenu ul li a:hover{
background: #DF0101; /*tab link background during hover state*/
color: white;}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}
/* CSS classes applied to down and right arrow images */
.downarrowclass{
position: absolute; top: 12px; right: 7px;}
.rightarrowclass{
position: absolute; top: 6px; right: 5px;}
6. Copy kode berikut dan pastekan di atas kode </head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://mastergomaster.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src=' http://emoticmastergomaster.googlecode.com/files/jquery_slide.js ' type='text/javascript'/>
7. Salin kode dibawah ini, dan letakan dibawah kode <body>
<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>Sub Menu4</a></li>
<li><a href='#'> Sub Menu4</a></li>
<li><a href='#'> Sub Menu4</a></li>
</ul>
</li>
<li><a href='#'>Menu5</a>
<ul>
<li><a href='#'>Sub Menu5</a></li>
<li><a href='#'>Sub Menu5</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
</ul>
</li>
<li><a href='#'>4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu6</a></li>
<li><a href='#'>Menu7</a></li>
<li><a href='#'>Menu8</a></li>
<li><a href='#'>Menu9</a></li>
<li><a href='#'>Menu10</a></li>
<li><a href='#'>Menu11</a></li>
</ul>
<br style="clear: left" />
</div>
8. Gantilah kata/kode yang harus diganti, saya kira mudah di pahami.
*(# adalah url/link, Menu 1 dst, Submenu 1 dst, 1, 2, 3, dst adalah tulisan url/link).
9. Langkah terakhir adalah menekan tombol Save.
Ok, hanya ini yang dapat saya sampaikan tentang "Cara Membuat Menu Horizontal dengan Dropdown", mohon maaf atas segala kekurangannya.
Wassalammualaikum wr. wb.
.: Semoga Bermanfaat :.
