Another Pure CSS3 Multi Level Drop Down Menu V3

After getting some positive comments, search engine visitors of previous Drop Down Menus V1 and Pure CSS3 Menu V3. We decided to release Another Pure CSS3 Drop Down Menu V3 For Blogger. This Multi Level Drop Down Menu is modifed version of previous css3 menu v2. I had added some cool features to this menu. This menu is a Stylish Pure CSS3 Multi Level Drop Down Menu For Blogger. It is compatible for almost all browsers like Mozilla Firefox and Google Chrome etc but the rounded corners and shadow will not be rendered properly. This Multi Level Drop Down Menu is only available on WordPress but I had converted it into Blogger users and had made installation so easy you just need to copy and paste menu code in your blogger blog widget. This Menu  is provided by Script-Tutorials guys and it is widgetized and made compatible with Blogspot blog platform by ABT.

See Also

• Css3 Pure Menu V2 For Blogger
• Css3 Drop Down Menu For Blogger V1
• Smooth Multi Level Drop Down Menu for Blogger

Another Pure CSS3 Multi Level Drop Down Menu V3 Preview

Live Demo

Add Pure CSS3 Multi Level Drop Down Menu V3 To Blogger

Adding CSS Code

1. Go To Blogger > Layout > Edit HTML
2. Search For ]]></b:skin>
3. And paste the code below just above ]]></b:skin>

Adding HTML of Menu

1. Go To Blogger > Design
2. Click choose a gadget
3. Select HTML/javascript widget
4. Paste the following code inside it

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">HTML / CSS</a></li>
                <li><a href="#">JS / jQuery</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">JS</a></li>
                    </ul>
                </li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">XSLT</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul>
                <li><a href="#">By category</a>
                    <ul>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">XSLT</a></li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a href="#">By tag name</a>
                    <ul>
                        <li><a href="#">captcha</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="http://www.allbloggingtips.com">Go Back To The Tutorial</a></li>
    </ul>

Now kindly make these customization changes to add your own links to menu:

• Each TAB can be edited by directly understanding the following HTML code,

<li><a href=”#“>TAB TEXT</a></li>

In each case replace the hash sign (#) with your page URL or link and replace the text with your page title. I have kept the page titles unchanged in the code above so that you could easily edit them by seeing the demo.

Credits

This Another Pure CSS3 Multi Level Drop Down Menu V3 For Blogger is first shared on AllBloggingTips. Bloggers are requested to link back if they are going to share above widget with there visitors.

Confused or Need Help?

If you need some extra help in removing rows or columns then please feel free to post your questions. You can discus it as much with me as possible. This will help others to better understand on how to make further changes.

Tagged as: Blogger, menu

Did you enjoy this article? Tweet Share the Love

Subscribe via Email! Get Freebies, updates & Special offers straight into your inbox.