Membuat Menu Horizontal Drop Down

Untuk cara pembuatan Menu Horizontal Dropdown silahkan ikuti langkah-langkah berikut:
1. Baca : Cara masuk ke dalam template blogger
2. Centang Expand Template Widget
3. Copy Paste kode dibawah ini letakkan tepat diatas kode ]]></b:skin>

ul.drop-system {
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #f0f9ff;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #888
    }

ul.drop-system:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
    }

ul.drop-system li {
    float: left;
    padding: 0;
    margin: 0 1px 0 0;
    position: relative;
    border-right: 1px solid #aaa
    }

ul.drop-system li a {
    padding: 8px 20px;
    display: inline-block;
    text-decoration: none;
    font: bold 13px/20px Arial, sans-serif;
    text-transform: uppercase;
    color: #09f
    }

ul.drop-system li ul {
    display: none;
    width: 250px;
    background: #aaa;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: absolute
    }

ul.drop-system li ul li {
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    border: 0
    }

ul.drop-system li:hover ul {
    display: block
    }

ul.drop-system li ul li a {
    display: block;
    float: none;
    padding: 5px 20px;
    margin: 1px 0 0;
    background: #EBEBEB
    }

ul.drop-system li ul li a:hover {
    background: #ddd
    }

4. selanjutnya cari kode seperti ini

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

5. Copy kode berikut letakkan di bawah kode di atas tadi ( di bawah kode </div> )

<ul class='drop-system'>
<li><a href='#'>Nama Link</a></li>
<li><a href='#'>Nama Link</a>
<ul><!--menu drop down pertama -->
<li><a href='#'>Satu</a></li>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Satu</a></li>
</ul>
</li>
<li><a href='#'>Nama Link</a></li>
<li><a href='#'>Nama Link</a>
<ul><!--menu drop down kedua -->
<li><a href='#'>Satu</a></li>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Satu</a></li>
</ul>
</li>
<li><a href='#'>Nama Link</a></li>
<li><a href='#'>Nama Link</a>
<ul><!--menu drop down ketiga -->
<li><a href='#'>Satu</a></li>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Satu</a></li>
</ul>
</li>
</ul>

6. Simpan Template - Selesai