Cara Membuat Multi Level Dropdown Menu

Yupz selamat membaca sobat blogger semua. Kali ini saya akan membagikan cara membuat Multi Level Dropdown Menu. Mau tau bagaimana tampilan menu multi level yang akan saya bagikan? pasti mau ya!
Ok langsung saja,,,

Sebelum sobat menerapkan menu ini diblog sobat ada baiknya sobat lihat dulu demonya dengan klik link demo dibawah.

DEMO

OK sudah dilihat belum demonya sobat? kalau sudah yuk kita lanjutin ke tutorialya.

• Login ke blog anda atau klik disini 
• Klik tata letak
• Cari add GADGET lalu
• Pilih HTML/JavaScript
• Kemudian Copy Paste Script dibawah setelah itu
• Klik SAVE/Simpan
• Done

CSS

xHTML

 <ul id="NYUS_Menu">

  <li class="current"><a id="satu" href="Link-1">Nama Link-1    </a></li>
    <li><a id="satu" href="Link-2">Nama Link-2</a>
      <ul>
        <li><a href="Link-2a">Nama Link-2a</a>
          <ul>
            <li><a href="Link-2a-1">Nama Link-2a-1</a></li>
            <li><a href="Link-2a-2">Nama Link-2a-2</a>
              <ul>
                <li><a href="Link-2a-2.1">Nama Link-2a-2.1</a></li>
                <li><a href="Link-2a-2.2">Nama Link-2a-2.2</a></li>
                <li><a href="Link-2a-2.3">Nama Link-2a-2.3</a></li>
              </ul>
            </li>
            <li><a href="Link-2a-3">Nama Link-2a-3</a></li>
          </ul>
        </li>
      <li><a href="Link-2b">Nama Link-2b</a></li>
      <li><a href="Link-2c">Nama Link-2c</a></li>
      <li><a href="Link-2d">Nama Link-2d</a>
        <ul>
          <li><a href="Link-2d-1">Nama Link-2d-1</a></li>
          <li><a href="Link-2d-2">Nama Link-2d-2</a></li>
          <li><a href="Link-2d-3">Nama Link-2d-3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a id="satu" href="Link-3">Nama Link-3</a>
    <ul>
      <li><a href="Link-3a">Nama Link-3a</a>
        <ul>
          <li><a href="Link-3a-1">Nama Link-3a-1</a></li>
          <li><a href="Link-3a-2">Nama Link-3a-2</a></li>
          <li><a href="Link-3a-3">Nama Link-3a-3</a></li>
          <li><a href="Link-3a-4">Nama Link-3a-4</a></li>
        </ul>
      </li>
      <li><a href="Link-3c">Nama Link-3c</a></li>
      <li><a href="Link-3d">Nama Link-3d</a></li>
    </ul>
  </li>
  
  <li><a id="satu" href="Link-4">Nama Link-4</a>
    <ul>
      <li><a href="Link-4a">Nama Link-4a</a></li>
      <li><a href="Link-4b">Nama Link-4b</a></li>
    </ul>
  </li>
  
  <li><a id="satu" href="Link-5">Nama Link-5</a></li>
  
  <li><a id="satu" href="Link-5">Nama Link-6</a></li>

</ul> 

Sobat bisa mengembangkan CSS dan xHTML menu tersebut hingga tampilannya menjadi seperti apa yang kita inginkan.

Silahkan dicoba...! 

Tutorial blogger

Tweet