Hovering Navigation Menu Bar To Blogger

Navigation menu is an integral part of your Blog. By default in Bloggers template widget navigation menu is present but it doesn't look much beautiful than the hovering menu bar I have presented below. Today I am posting a tutorial on how to add beautiful navigation menu bar in your Blog.

■ Open your Blogger Dashboard

■ Now open TEMPLATE → Backup Template → Edit HTML
■ Now find (pressing Ctrl+F) " ]]></b:skin> "
■ Add below given code just above/before it.

CSS

.s-menu,.s-menu *{margin:0;padding:0;list-style:none;}
.s-menu{line-height:1.0;}
.s-menu ul
{position:absolute;top:-999em;width:13em;}
.s-menu ul li
{width:100%;}
.s-menu li:hover{visibility:inherit;}
.s-menu li
{float:left;position:relative;margin-right:0;}
.s-menu li li{margin-right:15px;}
.s-menu a
{display:block;position:relative;}
.s-menu li:hover ul,.s-menu li.sHover ul
{left:0;top:4.8em;z-index:-1;padding-top:0;}
.s-menu li:hover ul ul,.s-menu li.sHover ul ul
{padding-top:0;}
ul.s-menu li:hover li ul,ul.s-menu li.sHover li ul
{top:-999em;}
ul.s-menu li li:hover ul,ul.s-menu li li.sHover ul
{left:14.4em;top:0;}
ul.s-menu li li:hover li ul,ul.s-menu li li.sHover li ul
{top:-999em;}
ul.s-menu li li li:hover ul,ul.s-menu li li li.sHover ul{left:10em;top:0;}
.s-menu{float:left;}
.s-menu a
{
text-decoration:none;
line-height:27px;
}
.s-menu a,.s-menu a:visited
{
color:#7a7a7a;
min-width:1px;
z-index:11;
}
.s-menu li
{
background-color:#7a7a7a;
}
.s-menu li a
{
padding:12px 20px;
}
.s-menu li a:hover,
.s-menu li.sfHover a
{background:#FF7F24;
color:#fff;}
.s-menu li a:hover .s-sub-indicator,.s-menu li.sHover .s-sub-indicator,.s-menu li.current-menu-item a .sf-sub-indicator
{
no-repeat;background-position:-70px -24px;width:7px;height:7px;
}
.s-menu li.sHover li .s-sub-indicator,.s-sub-indicator
{
position:absolute;
display:block;
right:.75em;
top:1.7em;
width:7px;
height:7px;
text-indent:-999em;
overflow:hidden;
}
.s-menu li.sHover li .s-sub-indicator
{top:1.5em;}
.s-menu li li a,.s-menu li li a:visited,.s-menu li.sfHover li a
{
font-size:12px;
line-height:18px;
background:#fff;
color:#333!important;
border-bottom:1px dotted #dcdcdc;
font-weight:normal;
}
.s-menu li li:last-child a,.s-menu li li:last-child a:visited
{
border-bottom:none;
}
.s-menu a,.s-menu a:visited
{
color:#fff;
transition:none;
-webkit-transition:none;
-moz-transition:none;
transition:background-color 0.3s linear;
-moz-transition:background-color 0.3s linear;
-webkit-transition:background-color 0.3s linear;
-o-transition:background-color 0.3s linear;
}
.s-menu li:last-child a
{
background-image:none;
}

■ Now for adding Html code find " header " and as the below code just after/before it.

HTML

<div class="nav">
<div class="clear">
</div>
<ul class="s-menu s-js-enabled s-shadow" id="menu-category-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-752" id="menu-item-752">
<a href="http://www.blogger.com/">Home</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3925" id="menu-item-3925">
<a href="http://www.blogger.com/yourtexthere">Tab1</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-753" id="menu-item-753">
<a href="http://www.blogger.com/yourtexthere">Tab2</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3473" id="menu-item-3473">
<a href="http://www.blogger.com/yourtexthere">Tab3</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3473" id="menu-item-3473">
<a href="http://www.blogger.com/yourtexthere">Tab4</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3473" id="menu-item-3473">
<a href="http://www.blogger.com/yourtexthere">Tab5</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3473" id="menu-item-3473">
<a href="http://www.blogger.com/yourtexthere">Tab6</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3473" id="menu-item-3473">
<a href="http://www.blogger.com/yourtexthere">Tab7</a></li>
</ul>
<div class="search">
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>