Blue professional drop down menu for blogger

Menu is very essential part of a blog as it acts as a navigation system for your blog and even gives a professional look to a blog. It help your visitors to easily access all parts of your blog by enhancing your user interface.

Today we will add a blue professional dropdown menu in blogger which will give a professional look to your blog with good user interface. In the menu you can make changes according to your requirement by adding more elements to menu or by removing them.

Adding Blue Professional Dropdown Menu to blogger

Follow the following steps to add blue professional dropdown menu to blogger :

You may like -> Increase Search Engine Ranking

Step 1

Go to your Blogger Dashboard > Layout > Add a Gadget

Step 2

Add HTML/Javascript Gadget

and paste the following code in it

<style>

/* Blue Dropdown Menu by HTD Blogger */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3bLciLG8E-7knjIg_AryEpA1Qe62RsqFLOEim3f2Y1Lq2B5ITxzV2f6QGOLayuQ9j4nHcNoCLjEnRQQXnrpyeggvX2ZgkZND8oGoUOXK4fWWRgqZn6vXUPksUI45a6FgbrL8VMkT_Z_u/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3bLciLG8E-7knjIg_AryEpA1Qe62RsqFLOEim3f2Y1Lq2B5ITxzV2f6QGOLayuQ9j4nHcNoCLjEnRQQXnrpyeggvX2ZgkZND8oGoUOXK4fWWRgqZn6vXUPksUI45a6FgbrL8VMkT_Z_u/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3bLciLG8E-7knjIg_AryEpA1Qe62RsqFLOEim3f2Y1Lq2B5ITxzV2f6QGOLayuQ9j4nHcNoCLjEnRQQXnrpyeggvX2ZgkZND8oGoUOXK4fWWRgqZn6vXUPksUI45a6FgbrL8VMkT_Z_u/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3bLciLG8E-7knjIg_AryEpA1Qe62RsqFLOEim3f2Y1Lq2B5ITxzV2f6QGOLayuQ9j4nHcNoCLjEnRQQXnrpyeggvX2ZgkZND8oGoUOXK4fWWRgqZn6vXUPksUI45a6FgbrL8VMkT_Z_u/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

</style> 

    <ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
            <ul>
<li><a href="#">Menu element 1</a></li>
<li><a href="#">Menu element 2</a>
                    <ul>
<li><a href="#">sub element 1</a></li>
<li><a href="#">sub element 2</a></li>
</ul>
</li>
<li><a href="#">element</a></li>
<li><a href="#">element</a></li>
<li><a href="#">element</a></li>
<li><a href="#">element</a></li>
</ul>
</li>
<li><a href="#">Menu element 3</a>
            <ul>
<li><a href="#">Menu element</a>
                    <ul>
<li><a href="#">Sub element</a></li>
<li><a href="#">Sub element</a></li>
<li><a href="#">Sub element</a></li>
<li><a href="#">Sub element</a></li>
</ul>
</li>
<li><a href="#">Menu element</a>
                    <ul>
<li><a href="#">Sub element</a></li>
<li><a href="#">Sub element</a></li>
<li><a href="#">Sub element</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu element</a></li>
<li><a href="http://www.htdblogger.blogspot.com">Menu Element</a></li>
</ul>

Now customize the code accordingly and save the changes.