How to Add CSS Drop Down Menu To Blogger

Pure CSS drop down menu for blogger - Menubar is the must have widget for the blogger or any website so, that visitors of the blog can navigate to the other category pages from the one place where they come. it is not just helps your readers to go trough other page but it helps you reduce the bounce rate of your blog and increase the page-views as well. so, here's present the pure css based drop down menu for your blog and you have to just follow the steps given below to integrate this menu into your blog.

Preview : -

How to add this to blogger?
Go to blogger dashboard > Template > Edit HTML and search for the ]]></b:skin> tag using CTRL + F.
Now, copy and paste below CSS code just above it.


/* CSS drop down menu by bloggerwidgetgenerators.com */
        nav ul
        {
            list-style: none;
            position: relative;
            display: inline-table;
        }
        nav ul li a
        {
            display: block;
            padding: 25px 40px;
            text-decoration: none;
        }
        nav ul li
        {
            float: left;
        }
        nav ul ul li
        {
            position: relative;
            float: none;
        }
        
        /*Third Step*/
        
        nav ul ul
        {
            position: absolute;
            top: 100%;
        }
        nav ul ul ul
        {
            position: absolute;
            left: 100%;
            top: 0;
        }
        /*Colors*/
        
        nav ul
        {
            background: #0052a4;
            background: linear-gradient(top, #0052a4 0%, #0052a4 100%);
            background: -moz-linear-gradient(top, #0052a4 0%, #0052a4 100%);
            background: -webkit-linear-gradient(top, #0052a4 0%,#0052a4 100%);
            box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
            border-radius: 10px;
        }
        nav ul li:hover
        {
            background: #C0C0C0;
            background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
        }
        nav ul ul
        {
            background: #C0C0C0;
            background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
            border-radius: 0px;
            padding: 0;
        }
        nav ul ul li
        {
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
        }
        nav ul li a
        {
            color: #FFF;
        }
        nav ul li:hover a
        {
            color: #000;
        }
        
        nav ul ul li a
        {
            color: #fff;
        }
        nav ul ul li a:hover
        {
            color: #fff;
            background: #0052a4;
        }

Now, Blogger Dashboard > Layout > Add a Gadget > Choose HTML/Javascript from the list.
Copy and paste below code into blank area :

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a>
            <ul>
                
                <li><a href="#">Fun</a></li>
                <li><a href="#">freebies</a></li>
                <li><a href="#">Web Design</a>
                     <ul>
                         <li><a href="#">HTML</a></li>
                         <li><a href="#">CSS</a></li>
                     </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Archives</a>
            <ul>
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
            </ul>
        </li>
        <li><a href="#">AboutMe</a></li>
    </ul>
</nav>

Now, replace "#" with URL and Home, Articles, Fun etc texts with your menu texts. and finally, save your widget and you're done !

After completing above process don't forget to move your widget to after the header widget in your layout section.

If you have any query related to this, feel free to comment below.

Thanks :)

Add Comment

Quicker BD