How To Add Horizontal Sub Navigaion on Blogger

Horizontal sub navigation are widely popular these days, as it makes navigation much simpler. It was really aimed to minimize the vertical spacing taken while we navigate a certain tab. Blogger is a beautiful easy to use blogging platform, so implementing horizontal sub navigation makes your blogger looks professional. Before getting into the implementation, I would recommend taking a back up of your template. So here is our tutorial.

Live Demo
Step 1: Log in to your Blogger account and go to Dashboard > Layout > Edit HTML and check Expand Widget Template.

Search for <div id=’content-wrapper’>
Now replace it with the below code

Link 1
Link 2


Subnav Link |
Subnav Link |
Subnav Link


Link 3


Subnav Link |
Subnav Link |
Subnav Link




<div id='content-wrapper'>

Step 2: Search for ]]></b:skin> and replace it with the below code

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background: #000000; repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 repeat-x; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none; /*--Hide by default--*/
width: 970px;
background: #1376c9;
color: #fff;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}
]]></b:skin>

If necessary you can change the width according to the required width. Save you template to see the change. Join our forum to express and what you look for in blogger.