How To Add Stylish Drop Down Menu in Blogger

Custom Navigation Bar gives extra Gorgeous look to your Blog. Default navigation bar in blogger looks so dull and even you can use dropdown menu in it. Sometime you have lot of pages in your blog which you want to show into navigation bar but unfortunately you are unable to add into it due to the unavailability of 'Drop Down Menu'. I also found a lot of people asking about how to add Drop Down Menu bar in Blog. So today i will tell you how to add stylish Drop down menu into blog.

How To Add Custom Navigation Bar into Blogger

First Login into Your Blogger Account.

Select your Blog.

Now search the below code by pressing CTRL+F.

</header>

Now just under the </header> paste the below code.

<b:section class='nav' id='nav' maxwidgets='1' showaddelement='no'/>
<!-- start menu -->
<div id='nav'>
<ul>
  <li><a class='current' href='/'>Home</a></li>
  <li><a href='#' target='blank'>Blog tutorials</a>
  <ul class='sub-menu'>
  <li><a href='#'><b>Drop Down Menu 1</b></a></li>
    <li><a href='#'><b>Drop Down Menu 2</b></a></li>
  </ul>
  </li>
  <li><a href='#'>Portofolio</a></li>
  <li><a href='#'>Website</a></li>
  <li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- end menu --> 

Thats it! Save your template. you have created the structure of Drop down Menu.
Now we will customize the drop down menu using 'CSS'.
Click on Customize option left to HTML/Javascript, and select 'Add Css' down from the list.
and add the below code into it.

 .tabs {display:none;}
#nav{float:left;font-size:.990em;text-transform:uppercase;overflow:hidden;width:1031px;border-bottom:medium double #CCC;margin:0 auto;padding-left:2px;}
#nav ul{list-style:none;margin:0;padding:0;}
#nav ul li{float:left;padding-left:20px;}
#nav ul li a{float:left;color:#333;line-height:1.3em;text-decoration:none;background:transparent;padding:10px 15px 11px;}
#nav ul li a.current{color:#222222;padding-right:20px;}
#nav ul li a:hover,#nav ul li:hover > a{background:#4873DF;color:#fff;}
#nav li ul a:hover,#nav ul li li:hover > a{background:#4873DF}
#nav li ul{background:#eee;left:-980em;position:absolute;width:170px;z-index:9999;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;margin:38px 0 0;}
#nav li:hover ul{left:auto;}
#nav li ul a{width:135px;font-size:.8em;padding-right:0px;}
.nav ul li ul{position:absolute;left:0;display:none;visibility:hidden;}
.nav ul li ul li{display:list-item;float:none;}
.nav ul li ul li ul{top:0;}
.nav ul li ul li a{width:160px;border-top-width:0;margin:0;padding:5px;}
#nav li li ul{visibility:hidden;margin:-1px 0 0 160px;}
#nav li li:hover ul{visibility:visible;}
}

2. 

Do The same process as we did for Design 1.

HTML Part For Design 2.

<b:section class='nav' id='nav' maxwidgets='1' showaddelement='no'/>
<!-- start menu -->
<div id='nav'>
<ul>
  <li><a class='current' href='/'>Home</a></li>
  <li><a href='#' target='blank'>Blog tutorials</a>
  <ul class='sub-menu'>
  <li><a href='#'><b>Drop Down Menu 1</b></a></li>
    <li><a href='#'><b>Drop Down Menu 2</b></a></li>
  </ul>
  </li>
  <li><a href='#'>Portofolio</a></li>
  <li><a href='#'>Website</a></li>
  <li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- end menu --> 

CSS Part For Design 2.

#nav{float:left;font-size:.990em;text-transform:uppercase;overflow:hidden;width:1031px;margin:0 auto;padding-left:2px}
#nav{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqEHOU7Vua_nvR5xwCgsCjWFsbJ8HGwgngQ9PtiPgAiHqE6f5IhvxXV-Bs0B8GvMVh2VDjmW70amOJaqtUvzTNitBPBRS2eje6QxLYPKnwvVqfqu8WYnm6mbwJxLkMY_iwKiOAGwZjopP3/s1600/desin1.jpg); padding-top:6px;no-repeat;color:#fff;height:45px}
#nav ul{list-style:none;margin:0;padding:0}
#nav ul li{float:left;padding-left:20px}
#nav ul li a{float:left;color:#fff;text-decoration:none;background:transparent;padding-top:10px;padding-bottom:10px}
#nav ul li a.current{color:#fff;padding-right:8px;padding-left:8px;padding-bottom:8px}
#nav ul li a:hover,#nav ul li:hover > a{background:#4873DF;color:#fff;}
#nav li ul a:hover,#nav ul li li:hover > a{background:#4873DF;padding-bottom:8px}
#nav li ul{background:#222222;left:-980em;position:absolute;width:170px;z-index:9999;border-left:2px dotted #fff;border-right:2px dotted #fff;border-bottom:1px solid #ddd;margin:37px 0 0;text-align:left;font-size:0.8em;}
#nav li:hover ul{left:auto;}
.nav ul li ul{position:absolute;left:0;display:none;visibility:hidden;}
.nav ul li ul li{display:list-item;float:none;}
.nav ul li ul li ul{top:0;}
.nav ul li ul li a{width:160px;border-top-width:0;margin:0;padding:5px;}
#nav li li ul{visibility:hidden;margin:-1px 0 0 160px;}
#nav li li:hover ul{visibility:visible;}
}

Thats all. Now save Your Template!