CSS3 Multi-Level Drop Down Menu

It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties. It is compatible with all major browsers like FireFox, Chrome and Safari. Since IE7+  always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have kept the installation extremely easy. You just need to copy and paste the code. This Menu  is provided by webDesignerWall guys and it is widgetized and made compatible with Blogspot blog platform by MBT.

Live Demo

Add multi-level drop down menu To Blogger

The steps are as usual kept cute and simple. Follow these easy steps:

1. Go To Blogger > Design
2. Choose a HTML/JavaScript gadget
3. Paste the giant code below inside it,

<style>
#MBT-Container {
    font: normal 1em Arial, Helvetica, sans-serif;
     width:100%; float:left;   
}
a {
    color: #333;
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6u-acusBXtyjKwPJiNBpflQbRXLUzxvnmBqysvT3dS0M687M5r4a9UyjXs9-e4EyCvHkx8sVPQlc3TTMNE_J8juB8pI5l6-TnEEbKvXJ4oO2QKWTe-mSk-MfSIncTUwaifI8xsqKHqc/s1600/gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none; }

/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
   
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
    background: #000;
    color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6u-acusBXtyjKwPJiNBpflQbRXLUzxvnmBqysvT3dS0M687M5r4a9UyjXs9-e4EyCvHkx8sVPQlc3TTMNE_J8juB8pI5l6-TnEEbKvXJ4oO2QKWTe-mSk-MfSIncTUwaifI8xsqKHqc/s1600/gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -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: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#nav ul a:hover {
    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6u-acusBXtyjKwPJiNBpflQbRXLUzxvnmBqysvT3dS0M687M5r4a9UyjXs9-e4EyCvHkx8sVPQlc3TTMNE_J8juB8pI5l6-TnEEbKvXJ4oO2QKWTe-mSk-MfSIncTUwaifI8xsqKHqc/s1600/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
text-align:left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
    display: block;
}
/* level 2 list */
#nav ul {
    display: none;
text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6u-acusBXtyjKwPJiNBpflQbRXLUzxvnmBqysvT3dS0M687M5r4a9UyjXs9-e4EyCvHkx8sVPQlc3TTMNE_J8juB8pI5l6-TnEEbKvXJ4oO2QKWTe-mSk-MfSIncTUwaifI8xsqKHqc/s1600/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blogger Tricks</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
               
<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>

<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item 1</a></li>
<li><a href="#">Sub-Level Item 1</a>
<ul>
<li><a href="#">Sub-Level Item 11</a></li>
<li><a href="#">Sub-Level Item 22</a></li>
<li><a href="#">Sub-Level Item 33</a></li>
</ul>
</li>
                   
<li><a href="#">Sub-Level Item 1</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>   
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Create This »</a></li>

</ul></div>
<br/>

The best part about this menu is that you can give it any colour you want because here we are using a transparent gradient image which can take any colour you want. Like:

Now kindly make these customization changes:

• Each TAB can be edited by understanding the following simple HTML code,

<li><a href="#">TAB TEXT</a></li>

In each case replace the hash sign (#) with your page URL/link and replace the text with your page title. I have kept the page titles unchanged in the code above so that you could easily edit them by seeing the demo.

• To change the color of the menu simply replace #0080ff with a colour of your choice. You may use our Color Generator tool

That's it! Save your widget and see the magic right in your blogs! :)

Need Help?

If you need extra help in removing rows or columns then please feel free to post your questions. Tell me the specific row and column so that I could share your preferred code in the comments. You can discus it as much with me as possible. This will help others to better understand on how to make further changes. Peace and blessings buddies. :)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 11/27/2011