MULTI LEVEL DROP-DOWN MENU

Gimana cara buat sub menu dropdown. Memakai css dan jquery untuk membuatnya. Dan ini aku ambil dari blog amatullah83. Namun, untuk kode CSS sudah aku ubah sedikit (maklum masih newbie).
Nah, cara membuatnya seperti berikut :

1. Masuk ke akun blog anda
2. Masuk menu Tata Letak/Rancangan >>> Edit HTML

3. Tambahkan kode berikut setelah tag </head> (BAGI YANG SUDAH PERNAH MELAKUKANNYA SILAHKAN DILEWATI)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

4. Tambahkan script berikut dibawah kode jqury tadi :

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /><br /> <br /> <!--[if lte IE 7]><br /> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style><br /> <![endif]--><br /> <br /> <script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

5. Tambahkan kode CSS berikut ini :

.jqueryslidemenu{ <br /> font: bold 12px Times New Roman; <br /> background: #414141; <br /> width: 100%; <br /> } <br /> <br /> .jqueryslidemenu ul{ <br /> margin: 0; <br /> padding: 0; <br /> list-style-type: none; <br /> } <br /> <br /> /*Top level list items*/ <br /> .jqueryslidemenu ul li{ <br /> position: relative; <br /> display: inline; <br /> float: left; <br /> } <br /> <br /> /*Top level menu link items style*/ <br /> .jqueryslidemenu ul li a{ <br /> display: block; <br /> background: #414141; /*background of tabs (default state)*/ <br /> color: white; <br /> padding: 8px 10px; <br /> border-right: 1px solid #778; <br /> color: #2d2b2b; <br /> text-decoration: none; <br /> } <br /> <br /> * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ <br /> display: inline-block; <br /> } <br /> <br /> .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ <br /> color: white; <br /> } <br /> <br /> .jqueryslidemenu ul li a:hover{ <br /> background: black; /*tab link background during hover state*/ <br /> color: white; <br /> } <br /> <br /> /*1st sub level menu*/ <br /> .jqueryslidemenu ul li ul{ <br /> position: absolute; <br /> left: 0; <br /> display: block; <br /> visibility: hidden; <br /> } <br /> <br /> /*Sub level menu list items (undo style from Top level List Items)*/ <br /> .jqueryslidemenu ul li ul li{ <br /> display: list-item; <br /> float: none; <br /> } <br /> <br /> /*All subsequent sub menu levels vertical offset after 1st level sub menu */ <br /> .jqueryslidemenu ul li ul li ul{ <br /> top: 0; <br /> } <br /> <br /> /* Sub level menu links style */ <br /> .jqueryslidemenu ul li ul li a{ <br /> font: normal 14px Times New Roman; <br /> width: 158px; /*width of sub menus*/ <br /> padding: 5px; <br /> margin: 0; <br /> border-top-width: 0; <br /> border-bottom: 1px solid gray; <br /> } <br /> <br /> .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ <br /> background: #eff9ff; <br /> color: black; <br /> } <br /> <br /> /* ######### CSS classes applied to down and right arrow images ######### */ <br /> <br /> .downarrowclass{ <br /> position: absolute; <br /> top: 12px; <br /> right: 7px; <br /> } <br /> <br /> .rightarrowclass{ <br /> position: absolute; <br /> top: 6px; <br /> right: 5px; <br /> }<br />

6. Tambahkan kode HTML berikut di atas atau dibawah <div id='header-wrapper'> :


<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http://ubaynyzhar.blogspot.com/'>HOMEPAGE</a></li>
<li><a href='http://ubaynyzhar.blogspot.com/p/daftar-isi.html'>DAFTAR ISI</a></li>
<li><a href='http://ubaynyzhar.blogspot.com/search/label/trik%20blogging'>TIPS n TRIK</a>
  <ul>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/trik%20blogging'>Trik Bloging</a></li>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/browsing'>Browsing</a></li>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/HTML'>HTML</a></li>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/javascript/html'>HTML/Javascript</a></li>
  </ul>
</li>
<li><a href='http://ubaynyzhar.blogspot.com/p/tukar-banner.html'>Banner Exchange</a></li>
<li><a href='http://ubaynyzhar.blogspot.com/p/pasang-iklan.html'>Pasang Iklan</a></li>
<li><a href='http://ubaynyzhar.blogspot.com/search/label/favourite'>Favourite</a>
  <ul>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/hacking'>Hacking</a></li>
  <li><a href='http://ubaynyzhar.blogspot.com/2010/05/avenged-sevenfold.html'>A7X</a>
    <ul>
    <li><a href='http://ubaynyzhar.blogspot.com/2010/05/avenged-sevenfold.html'>About A7X</a></li>
    <li><a href='http://ubaynyzhar.blogspot.com/2010/05/a7xnightmare-lyric.html'>Lyric</a></li>
    </ul>
  </li>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/hacker%20team'>Hacker Team</a>
    <ul> 
    <li><a href='http://indonesianhacker.or.id'>Indonesian Hacker Team</a></li>
    <li><a href='http://binushacker.net'>Binus Hacker</a></li>
    <li><a href='http://indonesiancoder.com/'>Indonesian Coder</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href='http://ubaynyzhar.blogspot.com/search/label/religi'>RELIGI</a>
  <ul>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/kisah'>Kisah</a></li>
  <li><a href='http://ubaynyzhar.blogspot.com/search/label/tauladan'>Tauladan</a></li>
  </ul>
</li>
</ul>
<br style='clear: left'/>
</div> 

7. Simpan template dan lihat hasilnya 
:: KODE HTML DIATAS KALIAN SESUAIKAN DENGAN URL KALIAN ::

:: Sumber : http://amatullah83.blogspot.com ::