Solid Responsive Mega Drop Down Navigation Menu Widget For Blogger

VIEW DEMO

We have shared many navigation menu bar widget for blogger and some of them were drop down. So in this series we are going to add one more very professional but very effective navigation menu bar widget to blogger. This widget is created in html and css and we did not use any javascript so it is fast in loading and looks very professional. Take a look at some of the drop down navigation menu for blogger.

Hammer effect drop down navigation menu bar for blogger.

Charismatic social media drop down menu bar for blogger.

These are drop down navigation menus and apart from this we have shared many others navigation menus too. But this one is pretty awesome and professional. When you hover your mouse cursor over the menu then a sub menu appears with a white background. You can edit this navigation menu with your color choice that suits to your websites. We have chosen the basic color that will help you to increase website conversion rate. For more info how to increase website conversion rate, read the below article.

10 Psychological Blogger Design Tips To Increase Website Conversion

Fashion Style Navigation menu bar widget for blogger 
Cute Yellow Navigation menu bar widget for blogger 
King of Black Navigation Menu Bar Widget for blogger

We have embedded the both, html and css code in one code. You have to copy the code and paste it where you want this widget to appear.

How to add this drop down navigation menu to blogger.

To add this solid responsive navigation menu to blogger do this.

<style type="text/css">
/* A simple, css only, (some-what) responsive menu */
/* tiny reset */
* { padding: 0; margin: 0; }
body {
background: #ccc;
font-family: oswald, arial, serif;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
.bigbox {
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 40px;
}
/* a little "umph" */
.avdore {
background: #6EAF8D;
background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: linear-gradient(left, white 50%, #6EAF8D 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}
a {
text-avdoreation: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
/* clear'n floats */
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
/* prime */
ul.firstbaba li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.firstbaba li:last-child a {
border-right: none;
}
ul.firstbaba li a:hover {

color: #000;
}
/* secondbabas */
ul.secondbaba {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.secondbaba li {
float: none;
margin: 0;
}
ul.secondbaba li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.secondbaba li:last-child a {
border-bottom: none;
}
ul.secondbaba li a:hover {
color: #000;
background: #eeeeee;
}
/* secondbaba display*/
ul.firstbaba li:hover ul {
display: block;
background: #fff;
}
/* keeps the tab background white */
ul.firstbaba li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.firstbaba li:hover > a{
color: #000;
}
@media only screen and (max-width: 600px) {
.avdore {
padding: 3px;
}
.bigbox {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.firstbaba li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}
ul.firstbaba li:hover ul {
display: block;
background: #272727;
color: #fff;
}
ul.secondbaba {
display: block;
position: static;
box-shadow: none;
width: 100%;
}
ul.secondbaba li a {
background: #485f6f;
border: none;
color: #8B8B8B;
}
ul.secondbaba li a:hover {
color: #ccc;
background: none;
}
}
</style>
<div class="bigbox">
<span class="avdore"></span>
<nav>
<ul class="firstbaba">
<li>
<a href="">Blogger</a>
<ul class="secondbaba">
<li><a href="">History</a></li>
<li><a href="">widget</a></li>
<li><a href="">SEO</a></li>
<li><a href="">Tips</a></li>
</ul>
</li>
<li>
<a href="">Wordpress</a>
<ul class="secondbaba">
<li><a href="">widget</a></li>
<li><a href="">seo</a></li>
<li><a href="">template</a></li>
</ul>
</li>
<li>
<a href="">SEO</a>
<ul class="secondbaba">
<li><a href="">Tips</a></li>
<li><a href="">Tools</a></li>
<li><a href="">Websites</a></li>
</ul>
</li>
<li>
<a href="">About Me</a>
<ul class="secondbaba">
<li><a href="">My Life</a></li>
<li><a href="">History</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>
</div>