Cara membuat sub menu pull down

Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, sisipkan kode CSS berikut ini di bawah rangkaian kode CSS sebelumnya (lihat rangkaian kode CSS yang terdapat pada langkah ketiga artikel sebelumnyabintangsury97.blogspot.com), atau dapat pula Anda sisipkan 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.

Ketiga, cari rangkaian kode berikutnya (lihat contoh format rangkaian kode yang terdapat pada langkah keempat artikel sebelumnya), 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/AVvXsEgl2oHpRO5IcN-ZAKO8L7eY3x0aCY6N36_-KvtKZWyVoFhncQumJQ9cYyO_-PmLOLbyPgLf-piJpAQe4JWkw7pX0A0rdMkOMmZx5Ft8kOjiDVfMH_mBpJUXtFMHNdRslTEWxgpSwThatTc/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.

Keempat, simpan template.

Semoga berguna dan bermanfaat. Dan apabila mengalami kesulitan dalam mengimplementasikan teknik tersebut pada blog  yang Anda kelola, maka silakan mengajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Salam.

Sumber: bintangsury97.blogspot.com