Very easy multi dropdown menu Gadget

Very easy multi dropdown menu Gadget

multi drop down menu by kishor kc

To add this type of multi drop down menu in the blogers blog follow the following stapes and add html code in the gadgets.
Go to Blogger Dashboard > Layout

Click on Add a Gadget (below header)
Select HTML/JavaScript
Paste below code inside it,

<script src='http://code.kishorkc.blogspot.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by Kishor K.C. ######### */
/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul>

Then Customize It as you wish

Here normal ul and li rules are applied
To change background simply change background: #414141;
Replace every # with your own link
To create a drop down menu inside a Main Menu link simple add to it a rel attribute like rel="ddsubmenu1 Change the drop down number accordingly.

click here for thanks