We have shared many navigation menu bar widget for blogger and this time it is a mega drop down menu bar widget for blogger. That is fast in loading and compatible with all browsers. Blue color is known as the professional color that is the reason you see most of the website in blue colors so we decided to make this navigation menu bar in blue color and will be liked you, That is guaranteed.

We shared many social media sharing widget and navigation menu bar widget for fashion websites and entertainment websites and now we are developing codes and creating widgets for professional websites. Installation is pretty easy. You just have to copy the entire code and paste it where you want it to appear. Below is the code and the installation process. This widget is completely customizable. You can edit the background color, Texts and even fonts too and make it according to your own wishes. So let's find out how to install and add this beautiful and professional navigation menu bar widget for blogger.

Installation is very simple just copy the below code and paste it into the place where you want this widget to appear.

• Go to blogger dashboard.
• Go to layout.
• Click on add a gadget.
• Choose html/javascript.
• Copy the below code and paste it.
• You are done.

<style type="text/css">
#multimenu{
background:#156AA6;
overflow:hidden;
}
#multimenu ul {
float:left;
height:30px;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
#multimenu li {
float:left;
text-shadow:1px 1px 2px #0066B3;
padding:0;
}
#multimenu li a {
background:#156AA6;
color:#eee;
display:block;
font-weight:400;
line-height:30px;
border-left:1px solid #4B88B3;
border-right:1px solid #043457;
text-align:center;
text-decoration:none;
margin:0;
padding:0 25px;
}
#multimenu li.depan a {
border-left:none;
}
#multimenu li ul {
background:#156AA6;
height:auto;
border:0;
position:absolute;
width:225px;
z-index:80;
box-shadow:0 1px 5px #034257;
display:none;
margin:0;
padding:0;
}
#multimenu li li {
display:block;
float:none;
width:225px;
border-top:1px solid #4B88B3;
border-bottom:1px solid #043457;
margin:0;
padding:0;
}
#multimenu li:hover li a {
background:#156AA6;
}
#multimenu li ul a {
display:block;
height:30px;
font-size:12px;
font-style:normal;
text-align:left;
margin:0;
padding:0 10px 0 15px;
}
#multimenu li a:hover,#multimenuli:hover > a {
color:#fff;
}
#multimenu li:hover ul.hidden {
display:block;
}
</style>
<nav id='multimenu'>
<ul>
<li class='depan'><a href='/'>Home</a></li>
<li><a href='#'>Widgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Gadgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Blogging Tips</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#multimenu li ul').removeClass('hidden');
$('#multimenu li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>
</script>