ADD A UNIQUE STYLE DROP DOWN NAVIGATION MENU BAR FOR BLOGGER

In this post our team had introduced a conventional style of a horizontal drop down navigation bar. It has a mixture of blue and silver which gives it a great look. This menu is experienced as 'Drop Bar'. After having it on your blog you will not belive what you had done to your blog, Just try. There is a image shown below :-

HOW TO ADD DROP DOWN NAVIGATION MENU BAR

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>


NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste the following code just above/before the code you have searched.

.nav {
height:35px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiLGAG2xJ-_0gAnzBLXxWCFORdDQRfHD3K9ZKIqT8CkVTGfWevaxqo6pxUxtBceJWPOVYQ0ibtW6ThZMg6Y-CNs1kCB-CpNt7KHh8inLk63J-CKOb-bXiJQPdR9i-O5PthtQfYkYmP7I8/s1600/bg.gif) repeat-x; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:11px; 
width:100%; 
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table; 
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}

.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}

.nav .select a {
display:block; 
height:35px; 
float:left; 
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiLGAG2xJ-_0gAnzBLXxWCFORdDQRfHD3K9ZKIqT8CkVTGfWevaxqo6pxUxtBceJWPOVYQ0ibtW6ThZMg6Y-CNs1kCB-CpNt7KHh8inLk63J-CKOb-bXiJQPdR9i-O5PthtQfYkYmP7I8/s1600/bg.gif); 
padding:0 30px 0 30px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#2b3238;
}


.nav .select a:hover, 
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6ogujITsswijyMT5d3Uvt1hgphnfKJJEXq9hHItsz6D4Hukf5aRH208tB_w4KaraHI6-hwvV11JblJ2UjPucvmcJFSrv1YrdN7NAKQA_H5UQbHBnfHbG4aw5a5tALPmgejDDddzmf5ky/s1600/hover.gif); 
padding:0 0 0 15px; 
cursor:pointer; 
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b, 
.nav .select li:hover a b {
display:block; 
float:left; 
padding:0 30px 0 15px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6ogujITsswijyMT5d3Uvt1hgphnfKJJEXq9hHItsz6D4Hukf5aRH208tB_w4KaraHI6-hwvV11JblJ2UjPucvmcJFSrv1YrdN7NAKQA_H5UQbHBnfHbG4aw5a5tALPmgejDDddzmf5ky/s1600/hover.gif) right top; 
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
background:transparent; 
color:#2b3238;
}

.nav .select :hover .select_sub, 
.nav .current .show {
display:block; 
position:absolute; 
width:100%; 
top:35px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJN_4xVi03P282HbbyFbKr35xCOjvEe65p7ULKWRUIfhhUnfiW64LT_QlWeDJG4GX-mZjd2mw3XJtIuI71BSbaMIzxQbvGFerr6ugZToNoZpXL6CInKVgOVyJiaoJQ1eQGKAaFZbngrk0-/s1600/back.gif); 
padding:0; 
z-index:100; 
left:0; 
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
display:block; 
float:left; 
background:transparent; 
padding:0 10px 0 10px; 
margin:0; 
white-space:nowrap; 
border:0; 
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238; 
cursor:default; 
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
visibility:visible; 
color:#73a0d2; 
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b, 
.nav .select li:hover a b {float:none;} 
<![endif]-->

/*End Css Menu from http://www.pcleaks.blogspot.com*/

5). The most important step, Save your template carefully. Now,

6). Go to Dashboard > Design and select Page Elements. We will add menu bar below your header

If you dont have this section, see hoe to add it. ADD FULL WIDTH COLOUMN GADGETS TO BLOGGER

7). Select add a gadget and add HTML/Javascript, copy and paste the following code.

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">

<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>

</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">

<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>

</div>
</li>
</ul>

</div>
</div>

This is the code to create drop down navigation menu. Replace # with your links and text with your text.

If you got a good experience than leave comments and Email Me for any assistance.