Membuat Menu Horizontal With Drop Down Support All Browser

Mungkin sobat blogger masih ingat postingan saya yang sebelumnya yaitu Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal bagi yang belum melihat silahkan lihat disini. postingan ini di-request Oleh seorang sobat blogger Klik Marva~>www.klikmarva.blogspot.com.

Screenshot :

Untuk Langkah-langkah-nya :
Masuk ke Dasbor
Rancangan
Edit HTML
Beri tanda centang Expand Widget Templates
Copy kode dibawah ini dan pastekan di atas 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;}

Copy kode berikut dan pastekan di atas kode </head>

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

Copy kode di bawah ini kemudian pastekan di atas atau di bawah 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>

Gantilah kata/kode yang harus diganti
Langkah terakhir adalah menekan tombol save template.

Tolong juga ninggalin komentar (untuk motivasi bagi saya) dan klik juga iklannya ya! terima kasih

.: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,,,