Create multi-level drop down menus

How to create the multi level drop down menus for your blog?

Now a day, you don't need to spend hours to read the codes book to write the multi level drop down menus. You can copy the codes I provided below to your blog by following these simple steps:

1. Go to your template layout
2. Click on add a Gadget
3. Look for HTML/JavaScript and click on it
4. Here you can copy and paste the codes I provided below to your blog and you are done.

Note: Please change the colors to make it relevant to your needs.
I hope it helpful to you.
---

<style type="text/css">
#nav ul{
 margin:0;
 padding:0;
z-index: 100;
 list-style:none;       
}
#nav ul li{
 margin:0;
 padding:10px 20px;
 position:relative;
 height:20px;
 line-height:20px;
 background-color: orange;
}
#nav > ul > li {
 float: left;
 height:30px;
 line-height:30px;
 background-color:lightblue;
        color:blue;        
}
#nav li > ul{
 visibility:hidden;
 width:150px;
 position: absolute;
         z-index: 100;
 top:0px;
 left:150px;
 border-left:1px solid #000;
}
#nav > ul > li > ul{
 top:50px;
 left:0;
position: absolute;
}
#nav > ul > li:hover {
 background-color: red;
 color:#FFF;
}
#nav > ul li:hover li {
 color:blue;
}
#nav li:hover {
 background-color:#999;
 color:#000;
}

#nav li:hover > ul{
 visibility:visible;
}
</style>

<div id="nav">
 <ul>
     <li>Stage 1
         <ul>
             <li>Stage 2-1
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
             <li>Stage 2-2
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
             <li>Stage 2-3
                 <ul>
                        <li>Stage 3-1
                            <ul>
                                <li>Stage 4-1</li>
                                <li>Stage 4-2
                                    <ul>
                                        <li>Stage 5-1</li>
                                        <li>Stage 5-2</li>
                                        <li>Stage 5-3</li>
                                    </ul>
                                </li>
                                <li>Stage 4-3</li>
                            </ul>
                        </li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
            </ul>
        </li>
     <li>Stage 2
         <ul>
             <li>Stage 2-1
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
             <li>Stage 2-2
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
             <li>Stage 2-3
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
            </ul>
        </li>
     <li>Stage 3
         <ul>
             <li>Stage 2-1
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
             <li>Stage 2-2
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
             <li>Stage 2-3
                 <ul>
                     <li>Stage 3-1</li>
                     <li>Stage 3-2</li>
                     <li>Stage 3-3</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>