Add Stylish Multi-Level Drop Down Menu For Blogger

Hi friendzz Today im going to show you How To Add Stylish Multi-Level Drop Down Menu For Blogger Blog.Just follow the steps:

To view demo of this widget please click on following link

View Demo

How To 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 (link just below of Header)
3. Paste the giant code below inside it,

(Note - If you don't have layout as above in image then comment with your blog URL I will help you further)

<style>
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0DbNXNqYRuITp_Fui2UJvZhUQ3If42V46ObrQjOuRO3YYQzKiqO6bEllJyW0KY4B-yCHjGUpmVDsOgB_ZSxJxFBzsWC4Xd1Cy1jfyQBfkPBwNRUYdhvkE2jIr9YSzHtoTQufixBRLIk/s1600/hb-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);
    width: 100%
}

#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    font-family: calibri;
}


/* 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/AVvXsEjM0DbNXNqYRuITp_Fui2UJvZhUQ3If42V46ObrQjOuRO3YYQzKiqO6bEllJyW0KY4B-yCHjGUpmVDsOgB_ZSxJxFBzsWC4Xd1Cy1jfyQBfkPBwNRUYdhvkE2jIr9YSzHtoTQufixBRLIk/s1600/hb-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: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0DbNXNqYRuITp_Fui2UJvZhUQ3If42V46ObrQjOuRO3YYQzKiqO6bEllJyW0KY4B-yCHjGUpmVDsOgB_ZSxJxFBzsWC4Xd1Cy1jfyQBfkPBwNRUYdhvkE2jIr9YSzHtoTQufixBRLIk/s1600/hb-gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -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;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0DbNXNqYRuITp_Fui2UJvZhUQ3If42V46ObrQjOuRO3YYQzKiqO6bEllJyW0KY4B-yCHjGUpmVDsOgB_ZSxJxFBzsWC4Xd1Cy1jfyQBfkPBwNRUYdhvkE2jIr9YSzHtoTQufixBRLIk/s1600/hb-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;
}

html[xmlns] #nav {
    display: block;
}

* html #nav {
    height: 1%;
}
</style>
<ul id="nav">
  <li>
            <a href="http://tricksdonor.blogspot.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://tricksdonor.blogspot.com/">Create This</a>
        </li>
    </ul> 

Customizations

Now replace # with your links and replace Folder0, Folder1,Folder2 so on with the text which you want to appear on menu.

To change the color of the menu simply replace #7d7d7d with a color of your choice. You may use our Color Generator Tool 

That's it! Save your widget:) 

Thanxx.....