--> CSS3 Multi-Level Drop Down Menu | Experience Lab - Online business creation and development guide for bloggers and startups

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 fl...



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/AVvXsEgKG6XcyO1HBJEK4BnXZZ4WZg1BhO0jVsmUOPwO5uxJZ51E4gasgHTkIJTpyyVHGQ3Bhe_9n3Yyzap25Rfm-nMcOndKvMOE6Y1-lv4ddKW1SPa4-md9ciVL1o0ccHJiEb4UkABuJJYIWz8/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/AVvXsEgKG6XcyO1HBJEK4BnXZZ4WZg1BhO0jVsmUOPwO5uxJZ51E4gasgHTkIJTpyyVHGQ3Bhe_9n3Yyzap25Rfm-nMcOndKvMOE6Y1-lv4ddKW1SPa4-md9ciVL1o0ccHJiEb4UkABuJJYIWz8/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/AVvXsEgKG6XcyO1HBJEK4BnXZZ4WZg1BhO0jVsmUOPwO5uxJZ51E4gasgHTkIJTpyyVHGQ3Bhe_9n3Yyzap25Rfm-nMcOndKvMOE6Y1-lv4ddKW1SPa4-md9ciVL1o0ccHJiEb4UkABuJJYIWz8/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/AVvXsEgKG6XcyO1HBJEK4BnXZZ4WZg1BhO0jVsmUOPwO5uxJZ51E4gasgHTkIJTpyyVHGQ3Bhe_9n3Yyzap25Rfm-nMcOndKvMOE6Y1-lv4ddKW1SPa4-md9ciVL1o0ccHJiEb4UkABuJJYIWz8/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:

different colours

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. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: CSS3 Multi-Level Drop Down Menu
CSS3 Multi-Level Drop Down Menu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nLXTeF7klJn9CmeZN-nhqfK3JueWiZxbzBNbTJ67QEfAnj_IYN_0xV94bMmIkzRKZueqOsNG1WOBA73pbb27gIRmzmMO-Bjwv78nNF6s1ZkzgIjCyUYE6RCQTenYKvvwpWx13HShHyw/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nLXTeF7klJn9CmeZN-nhqfK3JueWiZxbzBNbTJ67QEfAnj_IYN_0xV94bMmIkzRKZueqOsNG1WOBA73pbb27gIRmzmMO-Bjwv78nNF6s1ZkzgIjCyUYE6RCQTenYKvvwpWx13HShHyw/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/11/css3-multi-level-drop-down-menu.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/11/css3-multi-level-drop-down-menu.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy