Best css drop down menu list for blogger

Today I am going to post a list of css drop down menu for your blog or website. This drop down menu Fully created in CSS and it does not effect your blog or website load time. Now a days most of blogger use drop down menu to make blog or website more attractive. Drop down menu is a best way to attract your visitors to visit again on your blog. Drop down menu play effective role in the development of an effective and user friendly blog. This drop down support almost every browser. You can easily change the color according to your website color scheme. If you have any problem in changing color feel free to ask by using comment box below.

How to Add Drop Down menu to your blog:

1. Go to Blogger.com and click on template.

2. Backup your template before adding it.

3. Click on Edit Html and Find the Code by using CTRL+F.

4. Find following Code ]]></:skin>  and add below Css code just above it. 

1. Black Shiny Drop Down Menu:

                                                                         
                                                                                      Live Demo..

#menu-bar {
width: 95%;
margin: 0px 0px 0px 0px;
padding: 7px 7px 15px 11px;
height: 23px;
line-height: 100%;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
box-shadow: 0px 5px 11px #2C2C66;
-webkit-box-shadow: 0px 5px 11px #2C2C66;
-moz-box-shadow: 0px 5px 11px #2C2C66;
background: #FFFFFF;
background: linear-gradient(top, #999999, #404040);
background: -ms-linear-gradient(top, #999999, #404040);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#404040));
background: -moz-linear-gradient(top, #999999, #404040);
border: solid 0px #6D6D6D;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 6px 0px;
padding: 0px 1px 0px 7px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: normal;
font-family: verdana;
font-style: normal;
font-size: 13px;
color: #DDE7DB;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 6px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-shadow: 1px 2px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #01394F;
background: linear-gradient(top, #FFFFFF, #FFFFFF);
background: -ms-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
color: #000000;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 1px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #3220D4 !important;
background: linear-gradient(top, #ECECEC, #65636E) !important;
background: -ms-linear-gradient(top, #ECECEC, #65636E) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#ECECEC), to(#65636E)) !important;
background: -moz-linear-gradient(top, #ECECEC, #65636E) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 3px #FFFFFF;
}
#menu-bar ul {
background: #FFFFFF;
display: none;
margin: 0;
padding: 0;
width: 188px;
position: absolute;
top: 23px;
left: 0;
border: solid 0px #FFFFFF;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: 0px 2px 16px #060522;
-moz-box-shadow: 0px 2px 16px #060522;
box-shadow: 0px 2px 16px #060522;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:14px 0px 10px 15px;
color:#191919 !important;
font-size:12px;
font-style:normal;
font-family:verdana;
font-weight: normal;
text-shadow: 4px 2px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}

Greenish Drop Down Menu: 

                                                                                   Live Demo..

#menu-bar {
width: 95%;
margin: 0px 0px 0px 0px;
padding: 12px 24px 16px 16px;
height: 26px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 5px 0px #646B62;
-webkit-box-shadow: 0px 5px 0px #646B62;
-moz-box-shadow: 0px 5px 0px #646B62;
background: #FFFFFF;
background: linear-gradient(top, #5F9599, #2C3025);
background: -ms-linear-gradient(top, #5F9599, #2C3025);
background: -webkit-gradient(linear, left top, left bottom, from(#5F9599), to(#2C3025));
background: -moz-linear-gradient(top, #5F9599, #2C3025);
border: solid 0px #6D6D6D;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 0px 0px;
padding: 2px 1px 0px 7px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: normal;
font-family: georgia;
font-style: normal;
font-size: 13px;
color: #DDE7DB;
text-decoration: none;
display: block;
padding: 7px 20px 6px 20px;
margin: 0;
margin-bottom: 0px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
text-shadow: 0px 2px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #000000;
background: linear-gradient(top, #FFFFFF, #F5E6F2);
background: -ms-linear-gradient(top, #FFFFFF, #F5E6F2);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F5E6F2));
background: -moz-linear-gradient(top, #FFFFFF, #F5E6F2);
color: #000017;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 1px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #000000 !important;
background: linear-gradient(top, #213F40, #65636E) !important;
background: -ms-linear-gradient(top, #213F40, #65636E) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#213F40), to(#65636E)) !important;
background: -moz-linear-gradient(top, #213F40, #65636E) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 3px #FFFFFF;
}
#menu-bar ul {
background: #FFFFFF;
display: none;
margin: 0;
padding: 0;
width: 188px;
position: absolute;
top: 26px;
left: 0;
border: solid 0px #FFFFFF;
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
-webkit-box-shadow: 0px 2px 16px #060522;
-moz-box-shadow: 0px 2px 16px #060522;
box-shadow: 0px 2px 16px #060522;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:14px 0px 10px 15px;
color:#191919 !important;
font-size:12px;
font-style:normal;
font-family:verdana;
font-weight: normal;
text-shadow: 4px 2px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 17px;
-webkit-border-top-left-radius: 17px;
-moz-border-radius-topleft: 17px;
border-top-right-radius: 17px;
-webkit-border-top-right-radius: 17px;
-moz-border-radius-topright: 17px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
-moz-border-radius-bottomleft: 17px;
border-bottom-right-radius: 17px;
-webkit-border-bottom-right-radius: 17px;
-moz-border-radius-bottomright: 17px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}

5. After adding this code click on Layout >> Add a gadget>> HTml and Javascript abd this below code.

<ul id="menu-bar">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

6. Click on Save button and Enjoy drop down menu on your blog.

Customization:

1. Change # with the link you use.

2. If you want to change the color of drop down menu. Use comment box i guide you how you can change the color easily.

Need Help?

If you need any help about drop down menu. Leave comment below by using comment box. I am always here to help you. 

Your feedback is important for us please give feedback about drop down menu.

Read More