CSS Multilevel Drop Down Menu for Blogger

All the post and pages are label in blogger but it doesn't have menu as wordpress.Here we are going post new multilevel drop down menu for blogger. CSS menu is very simple and easy to have it which mainly based on labels.This menu sorts each post according to the label of the post.This CSS multilevel drop down menu is used for all blogger template.It is multilevel menu and can be used with more than one level.

CSS Multilevel Drop Down Menu for Blogger

• Log in to blogger.
• Then template and expand widget template.
• Then add the below code above the ]]></b:skin> tag.

.b4lnavbar {
width:960px;
margin:0 auto;
height:30px;
background:#3697F7;
border-bottom:2px solid #fff;
}
.b4lnav {
margin: 0;
padding: 0;
}
.b4lnav ul {
margin:0px;
padding:2px 0 0 0;text-transform:uppercase;text-align:center;list-style:none;
}
.b4lnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #fff;
border-right:1px solid #fff;
height:30px;list-style:none;
}
.b4lnav li a, .b4lnav li a:link, .b4lnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-transform:uppercase;
text-align:center;
}
.b4lnav li a:hover, .b4lnav li a:active {
background: #333;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
.b4lnav li {
float: left;
padding: 0;
}
.b4lnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
.b4lnav li ul a {
width: 140px;
background:#333;
border:2px solid #fff;
}
.b4lnav li ul ul {
margin: -25px 0 0 161px;
}
.b4lnav li:hover ul ul, .b4lnav li:hover ul ul ul, .b4lnav li.sfhover ul ul, .b4lnav li.sfhover ul ul ul {
left: -999em;background: #333;
}
.b4lnav li:hover ul, .b4lnav li li:hover ul, .b4lnav li li li:hover ul, .b4lnav li.sfhover ul, .b4lnav li li.sfhover ul, .b4lnav li li li.sfhover ul {
left: auto;
}
.b4lnav li:hover, .b4lnav li.sfhover {
position: static;
}
.b4lnav li li a, .b4lnav li li a:link, .b4lnav li li a:visited, {
background: #3697F7;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #fff;
}
.b4lnav li li a:hover, .b4lnav li li a:active {
background: #3697F7;
color: #FFF;
display: block;     margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

To change the color of the navbar just alter the color in CSS,you can use our color code generator

Drop Down Menu Implementation in Blogger

Add drop down menu for blogger is the soul part placing this menu is risky.Now its implementation of menu and selecting the place where the menu is ready,the select the place in template or you can use html and javascript widget and use them as menu.

• Add the below code in the place where you need to get the drop down menu.

<div class='b4lnavbar'>
<ul class='b4lnav'>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a>
<ul>
<li><a href='#'>Side Drop Down 1</a></li>
<li><a href='#'>Side Drop Down 2</a></li>
</ul>
</li>
<li><a href='#'>Drop Down 3</a></li>
<li><a href='#'>Drop Down 4</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu4</a></li>
    </ul>
</div>

• Now replace the # with your link and give names for that link.
• That's all now save the template.

Have any trouble comment below?