Multi Level Drop Down Menu For Blogger

We already gave a tutorial on CSS DROP DOWN MENU that has no images and script. Just like that today i am giving a tutorial on Multi Drop Down Menu that means you can have a drop-down inside a drop-down. You can understand it by seeing the demo here. And as like the previous one, this uses no script and no images. Okay lets move.














ADD IT TO BLOGGER?
1. Add a 'HTML/JAVASCRIPT' gadget.
2. Paste the below code in the editor-

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="http://bloggertrickshut.blospot.com">Get This Menu</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a></li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Three Levels</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Hover Here For More</a>
                <ul>
                <li><a href="#">Level 2.3.1</a></li>
                <li><a href="#">Level 2.3.2</a></li>
                <li><a href="#">Level 2.3.3</a></li>
                <li><a href="#">Level 2.3.4</a></li>
                <li><a href="#">Level 2.3.5</a></li>
                <li><a href="#">Level 2.3.6</a></li>
                <li><a href="#">Level 2.3.7</a></li>
                </ul>
        </li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<style>
#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
}


#nav ul {
        margin:0;
        padding:0;
        list-style:none;
}


#nav ul li {
        float:left;
}


#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}


#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
}


#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
}
#nav ul li a:hover,
#nav ul li:hover > a {
        color: #252525;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;


}


#nav li ul a:hover,
#nav ul li li:hover > a  {
    color: #2c2c2c;
        background: #5C9ACD;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
        background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-top: 1px solid #7BAED9;
        text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}


#nav li:hover ul {
        left: auto;
}


#nav li li ul {
        margin: -1px 0 0 160px;
        -webkit-border-radius: 0 10px 10px 10px;
        -moz-border-radius: 0 10px 10px 10px;
        border-radius: 0 10px 10px 10px;
        visibility:hidden;
}


#nav li li:hover ul {
        visibility:visible;
}
#nav ul ul li:last-child > a {
        -moz-border-radius:0 0 10px 10px;
        -webkit-border-radius:0 0 10px 10px;
        border-radius:0 0 10px 10px;
}


#nav ul ul ul li:first-child > a {
        -moz-border-radius:0 10px 0 0;
        -webkit-border-radius:0 10px 0 0;
        border-radius:0 10px 0 0;
}
</style>

3. Customize this menu by understanding the code-
    <a href="Link URL">Page Title</a></li>


Enjoy Blogging:) Your comments are welcome:]