Create Branching Menu on The Blog

after the previous post I discussed how to create breadcrumb navigation on the blog this time I will come back to share tips for navigating and beautify blog by adding a branching menu on the navbar, in addition to beautify the appearance of branching menu this blog will allow visitors to know the content whatever is in our blog

if you want to create a branching menu on the blog please follow the steps below :

• login to blogger
• Design
• Edit html
• Expand Widget Templates

find this code ]]></b:skin> use ctrl + F to make it easier save the code below just above the last code

/* 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;
}

• Save template

and the next step you should do is

• Design
• Page element
• Add a gadget
• select HTML/JavaScript

save the code below in the widget
<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>

• Save

description: on the # replace with your destination url and good luck