Cara Membuat Menu/Submenu di Blog

Menu dan submenu atau yang lebih familiar dengan nama menu dropdown merupakan kelanjutan dari menu yang lainnya yang pernah saya entri.. 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/AVvXsEjSwyhiAZaVabj9AmNxxElSXZFMVHAySxDI73jn75MrKzbxOfUz6n3MNEey93DOuEDa2RnMkU2rW-FrTxoiigSc8sKcbgZPsL9K2DJ7rjx4YyxDLiNfwQYRcrULPAkB6a31sR8GDpmDBIk-/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/AVvXsEjSwyhiAZaVabj9AmNxxElSXZFMVHAySxDI73jn75MrKzbxOfUz6n3MNEey93DOuEDa2RnMkU2rW-FrTxoiigSc8sKcbgZPsL9K2DJ7rjx4YyxDLiNfwQYRcrULPAkB6a31sR8GDpmDBIk-/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/AVvXsEhwFZcb_ZZYwc3BVWIKJ-FKORWubkG8hiK1x_Fi828djbAhrjyFzvvwpie9aY8tPq93a-Zu04Eo4STjsNqwN69GTwblIOffJGJzbGTNH1VZblFALQoaIyeZVfQZjW5qyeWq3nzyivBvkMoP/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.
5. Jika ada permasalahan, silakan komentarnya.