CSS drop down menus for Blogger

It s sensible to possess CSS drop menu instead of mistreatment Jquery menu on your blog. Jquery menu cut down your page loading time. therefore nowadays i'm sharing pure CSS and hypertext markup language drop menu for your blogger blog. therefore currently you are doing not got to run once scripts like jquery after you have CSS and hypertext markup language with more customization. several blogger use this sort drop menu and a drop menu conjointly consumes less area on your menu bar. therefore lets begin to feature horizontal drop menu on your blog.

CSS3 Drop Down Menu Preview

Follow these steps to add CSS Menu 

Go to blogger dashboard.

Click on "Template" >> "Edit HTML" >> backup your template.

Now find  ]]></b:skin> and paste the following code just above it.

/* CSS3 Drop Down Menu By uppal2tech.com */#nav { float: left; font: bold 12px Arial, Helvetica, Sans-serif; border: 1px solid #121314; border-top: 1px solid #2b2e30; overflow: hidden; width: 100%; background: #3C4042; background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) ); background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% ); background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% ); box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;} #nav ul { margin: 0; padding: 0; list-style: none;} #nav ul li { float: left;} #nav ul li a { float: left; color: #d4d4d4; padding: 10px 20px; text-decoration: none; background: #3C4042; background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) ); background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% ); background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% ); box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset; border-left: 1px solid rgbaundefined255, 255, 255, 0.05); border-right: 1px solid rgbaundefined0,0,0,0.2); text-shadow: 0 -1px 1px rgbaundefined0, 0, 0, 0.6);}#nav ul li a:hover,#nav ul li:hover > a { color: #252525; background: #3C4042; background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) ); background: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% ); background: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% ); text-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.2), 0 -1px #000;} #nav li ul a:hover, #nav ul li li:hover > a { color: #2c2c2c; background: #5C9ACD; background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.17, rgbundefined61,111,177)), color-stopundefined0.51, rgbundefined80,136,199)), color-stopundefined1, rgbundefined92,154,205)) ); background: -moz-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% ); background: -o-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% ); border-bottom: 1px solid rgbaundefined0,0,0,0.6); border-top: 1px solid #7BAED9; text-shadow: 0 1px rgbaundefined255, 255, 255, 0.3);}#nav li ul { background: #3C4042; background-image: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) ); background-image: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% ); background-image: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% ); left: -999em; margin: 35px 0 0; position: absolute; width: 160px; z-index: 9999; box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset; -moz-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset; border: 1px solid rgbaundefined0, 0, 0, 0.5);} #nav li:hover ul { left: auto;} #nav li ul a { background: none; border: 0 none; margin-right: 0; width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-bottom: 1px solid transparent; border-top: 1px solid transparent;} .nav ul li ul {    position: absolute;    left: 0;    display: none;    visibility: hidden;} .nav ul li ul li {    display: list-item;    float: none;} .nav ul li ul li ul {    top: 0;} .nav ul li ul li a {    font: normal 13px Verdana;    width: 160px;    padding: 5px;    margin: 0;    border-top-width: 0;    border-bottom: 1px solid gray;} #nav li li ul { margin: -1px 0 0 160px; visibility: hidden;} #nav li li:hover ul { visibility: visible;}/* CSS3 Drop Down Menu By uppal2tech.com */<span style="font-family: Times New Roman;"><span style="white-space: normal;"></span></span>

Now click on "Save"

After adding CSS part on your blog now move to HTML part to add in your blog.

Click on "Layout" >> "Add a Gadget".

Now choose "HTML/Javascript" and paste following code in content box, do not write anything in title.

<div id="nav"> <ul>  <li><a href="#">Home</a></li>  <li><a href="#">Contact Us</a></li>  <li><a href="#">About Us</a></li>  <li><a href="#">Tutorials</a></li>  <li><a href="#">Sitemap</a></li>  <li><a href="#">Services</a>  <ul>   <li><a href="#">Sub Page #1</a></li>   <li><a href="#">Sub Page #2</a></li>   <li><a href="#">Sub Page #3</a></li>   <li><a href="#">Sub Page #4</a></li>   <li><a href="#">Sub Page #5</a></li>  </ul>  </li>  <li><a href="#">Create This</a></li> </ul></div><span style="font-family: Times New Roman;"><span style="white-space: normal;"></span></span>

After adding both part now replace # with your menu URL and replace menu names with your menu titles.

If you are facing any problem, feel free ask in comments.

You May also Like to Read:-

...............................................................................................................................................

How to Invite Your All LinkedIn Connections to Like Your Facebook Page in Single Click

...............................................................................................................................................

Why NO One Comment On Your Blog and What is the Solution for that

...............................................................................................................................................

How to remove a write protection from Pen Drive in windows 7

...............................................................................................................................................

How to easily create YouTube and Facebook apps in computer

...............................................................................................................................................

How to download YouTube playlist in Smartphone using TubeMate

...............................................................................................................................................