Smooth jQuery Multi Level Drop Down Menu For Blogger - V2

Navigation menu's help your readers to easily navigate through your blog and remember making things easy to your reader is a very good thing for every blogger.We previously shared a smooth jQuery multi-level drop down menu and you will observe it is still present in the popular posts widget.In this menu we have edited some CSS to give it perfect look and I hope you will also like this menu.The original script for this menu is taken from dnyamicdrive and we bloggerized this menu to works perfectly with your blogger blog.See the demo the menu first.

Live Demo

How To Add Multi Level Drop Down Menu To Blogger?

• Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
• Click on add a gadget link just below of Header (see image below)

• Paste below code and save it.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", 
 orientation: 'h', 
 classname: 'ddsmoothmenu', 
 
 contentsource: "markup" 
})
</script>

<style> 
.ddsmoothmenu {
    width: 100%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfpnRgY-EqpEoiuU_V67kc5un77cN4zkJh5vFM5TvtewRxMtNd0u6Df8BXR7AdS-I_sodKlDsE8g-_VigMbAawGW2HCzgSa7ErLV3GJ8MaCxaztaSPVMYOv9GrYz6KEuuenoIghP2Od0/s1600/menu-bg.png);
    vertical-align: middle;
    height: 33px;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
}

.ddsmoothmenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
}

.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #666666;
    text-decoration: none;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfpnRgY-EqpEoiuU_V67kc5un77cN4zkJh5vFM5TvtewRxMtNd0u6Df8BXR7AdS-I_sodKlDsE8g-_VigMbAawGW2HCzgSa7ErLV3GJ8MaCxaztaSPVMYOv9GrYz6KEuuenoIghP2Od0/s1600/menu-bg.png);
}

* html .ddsmoothmenu ul li a {
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    background: black;
    color: white;
}

.ddsmoothmenu ul li a:hover {
    background: black;
    color: white;
}

.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
}

.ddsmoothmenu ul li ul li ul {
    top: 0;
}

.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

* html .ddsmoothmenu {
    height: 1%;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
}

.toplevelshadow {
    opacity: 0.8;
} 
</style>  

<div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
        <li>
            <a href="http://www.helperblogger.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://www.helperblogger.com/">Create This</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>

Customizations

Note - I highly recommend you to use our HTML Editor to make your changes.You can see a live preview of your menu with using HTML Editor.Copy all of the above code and paste it into editor.

Any Help?

Many blogger gets problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask your any little query...