Navigation (Navbar) With SubMenu

This is my second post about Navigation Menu. In the previous post, i had explained How To Create A Standard Navigation Menu, and now i'd like to discuss about How To Create Horizontal Navigation Bar With SubMenu. With this methode, when a mouse points to a link of the menu, a list of links of sub-category will shows up as it slides/drops down. You have two choices to place this widget, above the "Outer Wrapper (Column above post)" or above your "Header" column. Let's get down to the bussiness.

1. Go to your Blogger Dashboard.
2. Design.
3. Edit HTML.
4. Find the tag ]]>< /b:skin> in your template and place the below code just above it.

#SubNavbar {background:#00a0ff; width:1400px; height:35px; color:#fff; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border:1px solid #fff;} #SubNavbarleft {width:700px; float:left; margin:0; padding:0;} #search {width:240px; font-size:12px; float:right; margin:0; padding:0;} #touch {margin:0; padding:0;} #touch ul {float:left; list-style:none; margin:0; padding:0;} #touch li {list-style:none; margin:0; padding:0; text-shadow:1px #333;} #touch li a, #touch li a:link, #touch li a:visited {color:#eee; display:block; text-transform:uppercase; margin:0; padding:10px 15px; font:bold 12px Arial, Times New Roman;} #touch li li a:hover, #touch li li a:active {background:#888; color:#fff; padding:5px 10px;} #touch li {float:left; padding:0;} #touch li ul {z-index:888; position:absolute; left:-888em; height:auto; width:150px; margin:0; padding:0;} #touch li ul a {width:120px;} #touch li ul ul {margin:-24px 0 0 170px;} #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul {left:-888em;} #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul {left:auto;} #touch li:hover, #touch li.sfhover {position:static;} #searchbox {padding:0; margin:0;} #search input{background:#fff; color:#333; float:left; margin:5px 0px; width:150px; padding:5px; border:1px solid #ccc; font:normal 12px arial, verdana, Times New Roman;} #search .button {background:#333; color:#fff; font-size:12px; margin:5px 0 0 5px; padding:5px; width:30px; cursor:pointer; border:1px solid #888;} #top {background:#fff; margin:10px auto 0; padding:10px; width:1400px; border:1px solid #ccc; word-wrap: break-word; overflow:hidden; font-size:12px;} #top a, #top a:visited {font-weight:normal; color:#00a0ff; text-decoration: none;} #top a:hover {color:#f0f0f0; text-decoration:underline;} #top p {font-size:12px; font-weight:bold; padding:0; margin:0;} .topleft {width:600px; float:left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin:0; padding:0;} .topright {width:800px; float: right; margin:0; padding:0; text-transform:normal;}

To be the lesser arrangement the code above looks like the below.

#SubNavbar {background:#00a0ff; width:1400px; height:35px; color:#fff; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border:1px solid #fff;} #SubNavbarleft {width:700px; float:left; margin:0; padding:0;} #search {width:240px; font-size:12px; float:right; margin:0; padding:0;} #touch {margin:0; padding:0;} #touch ul {float:left; list-style:none; margin:0; padding:0;} #touch li {list-style:none; margin:0; padding:0; text-shadow:1px #333;} #touch li a, #touch li a:link, #touch li a:visited {color:#eee; display:block; text-transform:uppercase; margin:0; padding:10px 15px; font:bold 12px Arial, Times New Roman;} #touch li li a:hover, #touch li li a:active {background:#888; color:#fff; padding:5px 10px;} #touch li {float:left; padding:0;} #touch li ul {z-index:888; position:absolute; left:-888em; height:auto; width:150px; margin:0; padding:0;} #touch li ul a {width:120px;} #touch li ul ul {margin:-24px 0 0 170px;} #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul {left:-888em;} #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul {left:auto;} #touch li:hover, #touch li.sfhover {position:static;} #searchbox {padding:0; margin:0;} #search input {background:#fff; color:#333; float:left; margin:5px 0px; width:150px; padding:5px; border:1px solid #ccc; font:normal 12px arial, verdana, Times New Roman;} #search .button {background:#333; color:#fff; font-size:12px; margin:5px 0 0 5px; padding:5px; width:30px; cursor:pointer; border:1px solid #888;} #top {background:#fff; margin:10px auto 0; padding:10px; width:1400px; border:1px solid #ccc; word-wrap: break-word; overflow:hidden; font-size:12px;} #top a, #top a:visited {font-weight:normal; color:#00a0ff; text-decoration: none;} #top a:hover {color:#f0f0f0; text-decoration:underline;} #top p {font-size:12px; font-weight:bold; padding:0; margin:0;} .topleft {width:600px; float:left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin:0; padding:0;} .topright {width:800px; float: right; margin:0; padding:0; text-transform:normal;}

5. Find the code < div id='header'> in your template and put the below code above it (or above the < div id='content-wrapper'> if you want this Navbar to show above your Outer Wrapper).

<div id='SubNavbar'> <div id='SubNavbarleft'> <ul id='touch'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='[Main Menu Url 1]'>[Main Menu Anchor 1]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> </ul></li> <li><a href='[Main Menu Url 2]'>[Main Menu Anchor 2]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> </ul></li> <li><a href='[Main Menu Url 3]'>[Main Menu Anchor 3]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> <li><a href='[Submenu Url 4]'>[Submenu Anchor 4]</a></li> </ul></li> <li><a href='[Main Menu Url 5]'>[Main Menu Anchor 5]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> <li><a href='[Submenu Url 4]'>[Submenu Anchor 4]</a></li> <li><a href='[Submenu Url 5]'>[Submenu Anchor 5]</a></li> </ul></li> </ul></div> <div id='search'> <form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='button' type='submit' value='Search'/> </form></div></div>

To be the lesser arrangement the above code looks like the following.

<div id='SubNavbar'> <div id='SubNavbarleft'> <ul id='touch'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='[Main Menu Url 1]'>[Main Menu Anchor 1]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> </ul></li> <li><a href='[Main Menu Url 2]'>[Main Menu Anchor 2]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> </ul></li> <li><a href='[Main Menu Url 3]'>[Main Menu Anchor 3]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> <li><a href='[Submenu Url 4]'>[Submenu Anchor 4]</a></li> </ul></li> <li><a href='[Main Menu Url 5]'>[Main Menu Anchor 5]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> <li><a href='[Submenu Url 4]'>[Submenu Anchor 4]</a></li> <li><a href='[Submenu Url 5]'>[Submenu Anchor 5]</a></li> </ul></li> </ul></div> <div id='search'> <form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='button' type='submit' value='Search'/> </form></div></div>