How to Create a Drop Down Menu in Blogger

A navigation menu/drop down menu makes your blog/website user-friendly by allowing your visitors to easily navigate your blog posts by just selecting categories from the menu. A navigation menu plays an important role in your blog development, either its a top website like Mashable or a newly created blog, a drop down menu is an essential element of every website. It makes your blog user-friendly, easy to navigate and also adds a new and unique look to your design and makes it look professional. After reading all these advantages if you want to add a Drop Down menu to your Blog/Website, then in this tutorial we'll show you that how to create a Drop Down Menu in blogger. The credit goes to MBT. The design we're going to share today is simple, clean and will surely attract your visitors.

How to Create a Drop Down Menu in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

body {
margin: 0px;
}
#menu{
background: #3EA9AC;
color: #fff;
height: 40px;
text-transform:uppercase;
border-bottom: 2px solid #3EA9AC;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 1px solid #3EA9AC;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:'Open Sans',Helvetica,Arial,sans-serif;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #fff;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:'Open Sans',Helvetica,Arial,sans-serif;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #3EA9AC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:'Open Sans',Helvetica,Arial,sans-serif;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

Now again Search for the <body> tag and just below it add the following code

<nav id='menu'>
    <input type='checkbox'/>
    <label>≡<span>Blogolect</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down 1<font size='1'>▼</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    <li><a href='#'>Tab No 4</a></li>
    <li><a href='#'>Tab No 5</a></li>
    <li><a href='#'>Tab No 6</a></li>

    </ul>
    </li>
    <li><a href='#'>Services</a></li>
    <li><a href='#'>Drop Down 2<font size='1'>▼</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
        </nav>

Replace Blogolect with your Blog name

Replace # with the Links and rename the categories

Finally click Save Template button and you're done!

From Editors Desk

We hope this article may have helped you in creating a drop down menu for your blog. Share this article with your friends and don't forget to subscribe us!

Tags:

Blog Design Menus Tutorials Widgets

7 comments to ''How to Create a Drop Down Menu in Blogger"

josef999 October 2016 at 02:38
Exclusive offers this Diwali for all amazon prime customers now redeem up to 100$ amazon gift card codes here on this webpage and enjoy shopping.
laustan18 August 2018 at 03:38
It contains all the data including full web address, time at which a given site got to, transmission capacity exchanged amid every association and information downloaded from the given site like thesis writing service
Alex daina10 September 2018 at 08:04
The cash is accessible considerably speedier than it is with a bank credit. Unsecured trader loans are extraordinarily an extraordinary alternative for retail and eatery shippers, not just on the grounds that these kinds of organizations can barely be supported by the conventional bank, yet in addition on account of the quick liquidity and straightforward process. Payday Loans
CaBone Television25 September 2018 at 01:10
SUBSCRIBE
www.youtube.com/channel/UCyhmdz5sVrybBqErxG0IZmg
Follow Me On
Instagram. toneycabone.
https://www.instagram.com/
Check me out on spotify
Toney Cabone!
https://open.spotify.com/album/49rgsWxOWWTUd90CznWfEM?si=3UL7QLaGQKiraV4fib5z6g
Ke!www.youtube.com/channel/UCyhmdz5sVrybBqErxG0IZmg
Follow Me On
Instagram. toneycabone.
https://www.instagram.com
https://open.spotify.com/track/6gDPsFuGbbcxa2Ftwc6mKU?si=r-MTHP-zRyCUXlml2YsEyQ
HellTown Massacre Vol 1!
https://open.spotify.com/album/6BwEL4mdfLihE0p4EZSzkP?si=jKgEL-mETuiefBqpGlRpNQ
Rayzor!
https://open.spotify.com/artist/7qJVd5VHvWjTCJFyVPjAyQ?si=JB-HI520TR68SMUFa1fuKw
J Dogg! https://open.spotify.com/album/3kZP5udFkkapuE8hrEhku1
Aman9 May 2019 at 07:41
medical college in Karnataka government private medical college in Karnataka

Don't Miss

How to Create a Drop Down Menu in Blogger