Cara Membuat Menu dan Submenu Horizontal di Blog

Menu dan submenu atau yang lebih familiar dengan nama menu dropdown merupakan kelanjutan dari menu yang lainnya yang pernah saya entri.[read cara membuat menu horizontal sederhana di blog]. Adapun yang saya maksud dengan menu dan submenu yaitu seperti gambar di bawah.

Adapun langkahnya, sama seperti kita membuat menu yang lainnya, yaitu:
1. Login dan masuk ke 'perancangan' -- 'edit HTML'
2. Cari kode ]]></b:skin> dan tempatkan script CSS di bawah sebelum kode tersebut (silakan copy)

.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-container{position:relative;height:40px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvSKso9ACSdAbfSV9K1acrDDqmOqkrTdufEYbtaKk1zTklUa3lbrO3ooIhKxud_fI1MxJ7Wew50JFA1PphYlruEO51WKHkLzwTe19U6jL4sfErTU6DxuRU7E-iWyLDSpanGnGrhd1gCmh/s0/menu-secondary-bg.png) left top repeat-x;margin:15px 0 15px 0}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#FFF;padding:14px 15px 11px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt; a,.menu-secondary li.current-cat &gt; a,.menu-secondary li.current_page_item &gt; a,.menu-secondary li.current-menu-item &gt; a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvSKso9ACSdAbfSV9K1acrDDqmOqkrTdufEYbtaKk1zTklUa3lbrO3ooIhKxud_fI1MxJ7Wew50JFA1PphYlruEO51WKHkLzwTe19U6jL4sfErTU6DxuRU7E-iWyLDSpanGnGrhd1gCmh/s0/menu-secondary-bg.png) left -140px repeat-x;outline:0}
.menu-secondary li li a{color:#fff;background:#E8202D;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt; a,.menu-secondary li li.current-cat &gt; a,.menu-secondary li li.current_page_item &gt; a,.menu-secondary li li.current-menu-item &gt; a{color:#fff;background:#F8424E;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:13px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
.wrap-menu-secondary .sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0p_ozKh_Pz6VvGBisEDJCkUYla3iN7zzrJ9Z_5LIXNJfcU8SdohyMNWDx2MsE0AMWVrpcNxS_K-cMJqVt8E1PrlzVFitxEOQq0JjzDzfTS4F3xVNC3toWlmYn9MUJMChhqzJdOPj94D4t/s0/menu-secondary-shadow.png&#39;) no-repeat bottom right}

3. Lalu cari kode </header> dan tempatkan kode HTML di bawah sebelum kode itu </header> atai atas kode </header>. atau terserah Anda mau dipasang dimana., silakan copy

<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>
<li><a href='http://prabudx.blogspot.com'>Tutorial Blog</a></li></ul>
</div>

4. Save template. dan lihat hasilnya.

Artikel Terkait