Navigation Menu With Sub Menu

Note it down.. before making any change to template please save a copy of your template.

]]>

Step 3

/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 980px;
height: 35px;
background: url(http://1.bp.blogspot.com/_hcF8ssiWKd4/SfFEOgrftZI/AAAAAAAAAbk/I6bxuLEHk28/s1600/catmenu.png) repeat-x top;
display:block;
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #42484D;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(http://1.bp.blogspot.com/_hcF8ssiWKd4/SfFEOgrftZI/AAAAAAAAAbk/I6bxuLEHk28/s1600/catmenu.png) repeat-x top;
width: 150px;
color: #3D81EE;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}


Now it’s time to learn about some css codes. don’t worry you just have to know how this css code works for better gpraphics of your templates.

so let’s start. first change this background picture (http://1.bp.blogspot.com/_hcF8ssiWKd4/SfFEOgrftZI/AAAAAAAAAbk/I6bxuLEHk28/s1600/catmenu.png) with your background picture or you have an option remove the picture link and work with html color code. search google for your templates matching html color code and replace with my color codes and also put color code in background from where you are going to remove the picture. then next step.


Step 4

Now find the next line in the code

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>


Step 5

And immediately BELOW/AFTER it, paste this code:



<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://yoursite.com/search/label/Menu1'>Menu1</a></li>
<li><a href='http://yoursite.com/search/label/Menu2'>Menu2</a>
<ul>
<li><a href='http://yoursite.com/search/label/sub-Menu1'>Sub Menu1 Under Menu2</a></li>
<li><a href='http://yoursite.com/search/label/sub-Menu2'>Sub Menu2</a></li>
<li><a href='http://yoursite.com/search/label/sub-Menu3'>Sub Menu3</a></li>
<li><a href='http://yoursite.com/search/label/sub-Menu4'>Sub Menu4</a></li>
<ul>
<li><a href='http://yoursite.com/search/label/sub-Menu1'>sub Menu1 under sub Menu4</a></li>
<li><a href='http://yoursite.com/search/label/sub-Menu2'>Sub Menu2</a></li>
</ul>
</li>
<li><a href='http://yoursite.com/search/label/Sub-Menu1'>Sub Menu 5</a></li>
<li><a href='http://yoursite.com/search/label/Sub-Menu1'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='http://yoursite.com/search/label/Menu3'>Menu3</a>
<ul>
<li><a href='http://yoursite.com/search/label/Sub-Menu1'>Sub Menu1 Under Menu3</a></li>
<li><a href='http://yoursite.com/search/label/Sub-Menu2'>Sub Menu2</a></li>
</ul>
</li>
<li><a href='http://yoursite.com/search/label/Menu4'>Menu4</a></li>
</ul>
</div>
</div> <!-- end navbar -->

Now some more work replace yoursite.com with your blog url and change the necessary category. Till now i think you must have understood how this HTML codes work. You can Customize by Adding or removing or changing menu, Sub-menu’s.

If  you have any doubt don’t hesistate to contact us. If successfully done save your templates. Write a nice comment in my comment box and post it.