Add Beautiful CSS3 Drop Down Menu to Blogger Blog

SOCIALIZE IT →

Tweet

It s good to have CSS drop down menu rather than using Jquery menu on your blog. Jquery menu slow down your blog loading time. So today I am sharing pure CSS and HTML drop down menu for your blogger blog. So now you do not have to run after scripts like jquery when you have CSS and HTML with many more customization. Many blogger use this kind drop down menu and a drop down menu also consumes less space on your menu bar. So lets start to add horizontal drop down menu on your blog.

XZGT3MH5DX4U

How to Drop Down 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 BloggingTuition.org */

#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 BloggingTuition.org */<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.