How To Make Drop Down Menu Tabs By using CSS3

Internet is already flooded with blogging tutorials that talks on making menu tabs through using css3 which makes the whole thing impressive and beautiful. I will show you the same tutorial but I will make it a little bit different since  I will add a very small and simple trick that is, make the home tab to be highlighted as you open your blog  pages. It is  cool and professional type of menu tabs for your blog. Without much words to say, let us go with the process!
See the live demo for " Drop Down Menu Tabs With CSS3".

Read Also: How To Add Fancy CSS3 & JQuery Lavalamp Menu For Blogger

Making Drop Down Down Menu Through  CSS3

Step 1. Go to Blogger Dashboard >> Lay out
Step 2. Click  Add  a Gadget >> HTML/Javascript
Step 3. Paste the code below inside the blank page or space

<style>
/*------ CSS3 Drop Down Menu By BTAT (http://bloggingtipsandtrix.blogspot.com)---------*/
#btat-menu, #btat-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#btat-menu :first-child > a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 6px;
border-radius: 4px 0px 0px 4px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu {
width: 560px;
height:38px;
margin: 60px auto;
border: 0px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu:before,
#btat-menu:after {
content: "";
display: table;
}
#btat-menu:after {
clear: both;
}
#btat-menu {
zoom:1;
}
#btat-menu li {
float: left;
border-right: 0px solid #158aee;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#btat-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#btat-menu li:hover > a {
color: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
*html #btat-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#btat-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#btat-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#btat-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#btat-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#btat-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#btat-menu ul a {
padding: 10px;
height:15px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#btat-menu ul a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #168eca;
}
#btat-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#btat-menu ul li:first-child a:hover:after {
border-bottom-color: #168eca;
}
#btat-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#btat-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
height:10px;
}
</style>
<br />
<ul id="btat-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Replace the "#" sign with your own link and the bolded words (Home, Categories, css, graphic design etc. )with your own title.

Step 4. Save and you're done!

Recommended for you:

Horizontal Drop Down Menu With Sub-Tabs In Two Columns In Blogger
How To Create A Drop Down Menu To Blogger/Blogspot
Create Multi Level Drop Down Menu In Blogger

If you have  more questions regarding its customizations just contact me through this link and I will try my very  best to help you.

Thanks buddies and Peace OUT!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook