Cara membuat menu bercabang di blog [Horizontal Branch Off]

Assalamualaikum
Salam blogger gan kali ini ane dapat info cara membuat menu bercabang di blog atau biasa di sebut horizontal branch off 

dari sobat ane http://blogg-komputer.blogspot.com/ 

berikut ini tampilan menunya :

ok kawan langsung aja kita ke tkp 

• seperti biasa harus login dulu ke blogger -> tata letak -> edit HTML ( jangan lupa expand widget )

kalau sudah cari kode berikut  ]]></b:skin>

 kalau udah ketemu masukan kode di bawah ini tepat di atas ]]></b:skin>

/* Navbar */

#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;

opacity: 0.99; filter: alpha(opacity: 98);}

#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}

#menu ul{padding:0; margin:0;}

#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}

#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}

#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}

#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}

#menu ul li ul {display:none;}

#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;

display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}

#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}

#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}

#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}

.status-msg-wrap{

display:none;

}

• simpan template 
• buka halaman ( element halaman )
• pada header halaman klik tambah gadget ( htmlm/java script )
• selanjut nya tinggal masukin kode berikut 

<div id='menu'>

<ul>

<li><a class='active' href='/'> Home</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul>

<li><a href='#'>Menu 2.1</a></li>

<li><a href='#'>Menu 2.2</a></li>

</ul></li>

<li><a href='#'>Menu 3</a>

<ul>

<li><a href='#'>Menu 3.1</a></li>

<li><a href='#'>Menu 3.2</a></li>

<li><a href='#'>Menu 3.3</a></li>

<li><a href='#'>Menu 3.4</a></li>

</ul></li>

<li><a href='#'>Menu 4</a></li>

<ul>

</ul>

</ul></div>

• catatan:
  Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
• selamat mencoba

Wassalam

Sumber :

 

http://blogg-komputer.blogspot.com/2011/02/cara-membuat-menu-bercabang-di-blog.html