css3 Drop down menu

After My Previous Article Make a Popup Subscribe Like aweber, I’m Back here With another Supercool Article About Cool Css3 Navigation In Blogger. Again Thanks To Mohammad Mustafa Sir For Making It Approved. This amazing drop down menu is created by Catalin Rosuand uses no images or scripts at all! We will be sharing a modified version which may work perfectly with Blogger. Its pure power display of CSS3 . It is really Cool and Professional Widget For Your Blog Which will really change the appearance of Your Blog and Make it trendy and attractive. It is very Easily Integrated in your BLOG.

Live Demo

Why Choose This Menu?

This Widget is Simple, Supercool And The Main Part is that It Doesn’t Needs Any jQuery or JavaScript. It uses no images at all and loads extremely fast. The previous CSS3 Menu that we shared made use of images and therefore took few seconds to load but this one is far ahead in quality load time. It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

Add it to Blogger

This Navigation Uses Css3 And Has A Smooth Scrolling Effect Which Makes It Unique And Special. Have Fun and Enjoy it By Adding In Your Blog.
To Enable This You Need To Do The Following :

  1. Go To Blogger > Design
  2. Click on “Add a Gadget”
  3. Choose HTML/Javascript widget
  4. Paste the following code inside it


/*—— CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)———*/

#mbt-menu, #mbt-menu ul {

margin: 0;

padding: 0;

list-style: none;


#mbt-menu {

width: 960px;

margin: 60px auto;

border: 1px 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;



#mbt-menu:after {

content: “”;

display: table;


#mbt-menu:after {

clear: both;


#mbt-menu {



#mbt-menu li {

float: left;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;


#mbt-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;


#mbt-menu li:hover > a {

color: #fafafa;


*html #mbt-menu li a:hover { /* IE6 only */

color: #fafafa;


#mbt-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;


#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;


#mbt-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);


#mbt-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;


#mbt-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;


#mbt-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;


#mbt-menu ul a:hover {

background-color: #0186ba;

background-image: -moz-linear-gradient(#04acec, #0186ba);

background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background-image: -webkit-linear-gradient(#04acec, #0186ba);

background-image: -o-linear-gradient(#04acec, #0186ba);

background-image: -ms-linear-gradient(#04acec, #0186ba);

background-image: linear-gradient(#04acec, #0186ba);


#mbt-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;


#mbt-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 #444;


#mbt-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;


#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;


#mbt-menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;


#mbt-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;

<ul id=”mbt-menu”>
<li><a href=”#”>Home</a></li>
<a href=”#”>Categories</a>
<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>
<li><a href=”#”>Work</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>


About carelexxmalik

helllllo everyone! my name is carelexx malik i love blogging and i have much intrest in it i always search for new things

Posted on February 21, 2012, in blogger and tagged , , , . Bookmark the permalink. 4 Comments.

  1. I have recieved inspiration from your posts.I have started visiting your website everyday to get something for new.Thank you

  2. Como vai? Julguei muito aplausível seu blog, e resolvi publicar esse recado! Valeu por isso, e fique com sucesso!

  3. Thanks for sharing. I will use it for my blog. You really have a very good website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: