Membuat dropdown menu pada page list horizontal

Navigasi horizontal pada blogspot telah tersedia 2 widget. Pertama disebut pageList dan yang kedua adalah LinkList. Dalam struktur template dinyatakan dalam sintax Tabs. Tabs baik pagelist maupun linklist masih terlalu sederhana. Apabila diaktifkan di bawah header, yang muncul hanya berupa tabs dengan susunan menu berderet menyamping, tidak terdapat sub menu atau dikenal dengan sebutan dropdown.

Meskipun kehadirannya sudah cukup membantu dalam membuat navigasi, namun dengan kelemahan yang tidak mencantumkan dropdown menu menjadikan tabs pagelist atau linklist menjadi kurang atraktif.

Untuk itu jika ingin menambahkan menu dropdown harus dilakukan modifikasi kode di dalam template edit html. Langkahnya sebagai berikut:
Agar proses modifikasi berjalan lancar, penuhi dulu persyaratannya:
1. Pastikan template yang digunakan adalah template bawaan blogger, bukan hasil download dari penyedia template gratisan.
2. Pastikan bahwa anda telah mengaktifkan menu tabs page (laman) di bawah header.

Jika dua syarat sudah dipenuhi, lanjutkan dengan langkah berikut ini:
1. Klik Expand Template Widget di dalam edit html template.
2. cari kode ]]>&lt/b:skin> . Setelah ketemu, masukkan kode berikut ini, tepat di atas kode ]]>&lt/b:skin>

.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;}

3. Berikutnya cari kode
<li><a expr:href='data:link.href'><data:link.title/></a></li>

lalu perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di bawah kode <b:/loop>.

<li><a href='#'>Menu1</a>
<ul>
<li><a href='URL'>Sub Menu 1.1</a></li>
<li><a href='URL'>Sub Menu 2.1</a></li>
<li><a href='URL'>Sub Menu 3.1</a></li>
</ul>
</li>
<li><a href='#'>Menu2</a>
<ul>
<li><a href='URL'>Sub Menu 1.2</a></li>
<li><a href='URL'>Sub Menu 2.2</a></li>
<li><a href='URL'>Sub Menu 3.2</a></li>
</ul>
</li>

4. Langkah terakhir Simpan alias Save

Perhatikan apa yang terjadi.? kini PageList telah memiliki sub menu.