Cara membuat menu drop down

Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’

sisipkan kode di bawah ini di atas kode ]]></b:skin>.

.kolom-menu ul li ul, 
.kolom-menu ul li:hover li ul, 
.kolom-menu ul li:active li ul, 
.kolom-menu ul li:focus li ul {
  z-index: 100; 
  position: absolute; 
  left: -1800px;
  height: auto; 
  margin: 0; 
  padding: 0;
  background-color: #336699; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
}

.kolom-menu ul li ul li a, 
.kolom-menu ul li ul li ul li a {
  border-right: none; 
  box-shadow: none; 
  width: 100%;
}

.kolom-menu ul li ul li a:hover, 
.kolom-menu ul li ul li a:focus,
.kolom-menu ul li ul li ul li a:hover, 
.kolom-menu ul li ul li ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125); 
  width: 100%;
}

/* List Item Kolom Sub Menu Pertama
------------------------------------*/
.kolom-menu ul li ul li, 
.kolom-menu ul li ul li:first-child {
  border-left: none; 
  width: 100px;
}

.kolom-menu ul li:hover ul, 
.kolom-menu ul li:active ul, 
.kolom-menu ul li:focus ul {
  left: auto; 
  top: 26px; 
  width: 120px;
}

/* List Item Kolom Sub Menu Kedua
------------------------------------*/
.kolom-menu ul li ul li ul li, 
.kolom-menu ul li ul li ul li:first-child {
  border-left: none; 
  width: 300px;
}

.kolom-menu ul li ul li:hover ul, 
.kolom-menu ul li ul li:active ul, 
.kolom-menu ul li ul li:focus ul {
  top: -1px; 
  white-space: normal; 
  text-align: justify;
  left: 120px; 
  width: 320px;
}

Keterangan:

Kode width: 120px; digunakan untuk mengatur ukuran lebar kolom sub menu level 1.  Apabila Anda melakukan perubahan untuk lebar kolom sub menu level 1 dengan mengganti angka yang digunakan pada kode tersebut, maka angka yang terdapat pada width: 100px; juga harus diubah dengan ketentuan angka yang digunakan untuk lebar kolom sub menu level 1 dikurangi 20. Sehingga jika Anda mengubah width: 120px; menjadi width: 200px;, maka secara otomatis width: 120px; harus diubah menjadi width: 180px;.

Demikian pula jika Anda melakukan perubahan untuk angka yang terdapat pada width: 320px;, maka secara otomatis pula angka yang digunakan pada width: 300px; adalah 320 – 20 = 300.

Sedangkan untuk angka yang digunakan pada left: 120px; adalah sama dengan angka yang digunakan pada width: 120px;. Sehingga apabila Anda melakukan perubahan ukuran pada width: 120px;, maka angka yang digunakan pada kode left: 120px; haruslah diisi dengan angka yang sama.

simpan template.

 kemudian sisipkan rangkaian kode baru di dalamnya dengan menggunakan format seperti contoh di bawah ini.

<ul>
  <li><a href='URL'>Sub Menu 1</a>
    <ul>
      <li><a href='URL'>Sub Menu 1.1</a></li>
      <li><a href='URL'>Sub Menu 1.2</a></li>
      <li><a href='URL'>Sub Menu 1.3</a></li>
    </ul>
  </li>
  <li><a href='URL'>Sub Menu 2</a></li>
</ul>

Sehingga apabila rangkaian kode tersebut telah disisipkan pada kode sebelumnya, maka akan menjadi seperti berikut ini.

<div class='bilah-menu-atas' id='bilahmenuatas' style='top: 0px;'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqU86ByYbkOcx2vMoQRbBvD9VZAr1PspXu3RdkXV_TZ-5vpPqOBUWRzZGxmRwXrDMekNQu2k_XXjkvrGrEtvKyYEAoKm6NdRzPVmw1kKYNTMp1-MTWNzi39wfOYNkUCIpLgT_yB4PmZj4/s800/Beranda.png' width='20px'/></a></li>
        
        
        <li><a href='URL'>Menu Kiri 1</a>
        
          <ul>
            <li><a href='URL'>Sub Menu 1</a>
              <ul>
                <li><a href='URL'>Sub Menu 1.1</a></li>
                <li><a href='URL'>Sub Menu 1.2</a></li>
                <li><a href='URL'>Sub Menu 1.3</a></li>
              </ul>
            </li>
            <li><a href='URL'>Sub Menu 2</a></li>
          </ul>
          
        </li>  
        
        <li><a href='URL'>Menu Kiri 2</a></li>
        
        
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Dan selanjutnya lakukan perubahan URL sesuai dengan link yang akan ditautkan serta sesuaikan pula nama sub menu yang akan ditampilkan.

Semoga berguna dan bermanfaat.   Wassalam.