Tutorial : Cara Membuat Sub Menu Pada Menu Utama Blog

Berbagai macam tutorial yang saya jumpai dan saya praktekan mengenai "Cara Membuat Sub Menu Blog", hanya satu tutorial yang memberikan hasil yang cukup memuaskan.

Source : CARA MEMBUAT SUB MENU PADA MENU UTAMA DI BLOGSPOT

Berikut langkah-langkahnya :
1. Klik menu Desain.
2. Pilih Menu Template lalu pilih menu Edit HTML 
3. Carilah Script berikut : div class='main-outer'>
note : dengan cara menekan tombol CTRL+F pada keyboard
4. Setelah dapat Copy-kan kode berikut tepat di atas script div class='main-outer'>

<style> /* -- Menu Horizontal + Sub Menu-- */ #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;} #cat-nav a:hover { color:#fff; } #cat-nav li:hover { background:#000; } #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;} #cat-nav .nav-description { display:block; } #cat-nav a:hover span { color:#fff; } #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; } #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;} #secnav li { float:left; width: auto; height:35px;} #secnav li ul { position: absolute; left: -999em; width: 200px; top:35px} #secnav li ul li { height:30px; border-top:1px solid #fff; } #secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; } #secnav li ul ul { margin: -30px 0 0 180px; } #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; } #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; } #secnav li:hover,#secnav li.hover { position:static; } #cat-nav #secnav {width:100%;margin:0 auto;} </style> <div id='cat-nav'> <ul class='fl' id='secnav'> <li><a href='#'>Beranda</a></li> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a> <ul id='sub-custom-nav'> <li><a href='#'>Sub Menu2 a</a></li> <li><a href='#'>Sub Menu2 b</a></li> </ul> </li> <li><a href='#'>Menu3</a> <ul id='sub-custom-nav'> <li><a href='#'>Sub Menu3a</a></li> <li><a href='#'>Sub Menu3b </a></li> </ul> </li> <li><a href='#'>Menu4</a> <ul id='sub-custom-nav'> <li><a href='#'>Sub Menu4a</a></li> <li><a href='#'>Sub Menu4b </a></li> </ul> </li> <li><a href='#'>Menu5</a></li> </ul> </div>
5. Sekian dulu. Saya akan menyempatkan waktu untuk menuliskan Tutorial penjelasan mengenai script di atas.