Solid Responsive Mega Drop Down Navigation Menu Widget For Blogger

Solid responsive navigation menu drop down navigation widget for blogger. With dashed borders. Good and best for professional websites and blogger blog.

Solid Responsive Mega Drop Down Navigation Menu Widget For Blogger
Solid Responsive Mega Drop Down Navigation Menu Widget For Blogger


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.


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.


Some More Navigation Menus



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.


  • Login to blogger.
  • Go to layout.
  • Click to add a gadget.
  • Choose html/javascript.
  • Copy the below code.
  • Paste it and you are done.


Complete code


<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>



Customization

Edit all the text in html code like blogger, history, SEO and others with your name.
Replace the # tag with your links.
To change the text color and background color, make changes in the css code.

So this is a solid responsive drop down navigation menu bar widget for blogger. If you liked this widget than please do comment and share.

Next Post Previous Post