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

17 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
CaBone Music ENT 25 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
mikerock29 August 2019 at 00:08
thanks for sharing it How to turn off iPhone XR
summaorublogger13 March 2020 at 04:13
Comment obtenir un compte Netflix gratuit sans carte de crédit 2020 netflix compte
Karen Rogers10 September 2020 at 00:48
I was searching for many blogs site and now finally I have got this cool place with lots of information.
UI/UX designers
Jullum23 December 2020 at 08:47
In this I agree with you that the site should be user-friendly. After all, the first main task is to delay the user visually and conveniently at first, so that later he wants to read the information. You can come here https://bit.ly/33A03u8 and reveal your idea to our custom software developers, who will deliver a product that exceeds your expectations.
Unknown27 January 2021 at 10:34
I never really thought I could possibly get a loan online until my friend got a personal loan from Capital One Finance ltd where i also applied for a loan and was approved with a good credit score and i can as well recommend them for anyone who needs a loan. Email: capitalonefinanceltd2@gmail.com or WhatsApp: +1 (267)404-6479
adam1040647 February 2021 at 21:54
Thanks for sharing
nemt dispatch software
albert smith19 March 2021 at 02:02
This comment has been removed by the author.
albert smith19 March 2021 at 02:03
This comment has been removed by the author.
Naveen Kumar Singh31 August 2021 at 04:58
Thanks for sharing such an informative post.
Professional Scrum Master Training
Product Owner Training
Certified Agile Coaching
Certified Scrum Developer Training
IDN Poker7 May 2022 at 21:52
Thanks for the information, it is such an incredible post. poker online
Gregory J. Trujillo30 July 2022 at 02:46
Look no further than Assignment Writing Service! Our experienced team of developers can create a custom menu that is both stylish and functional, giving your visitors an easy way to navigate your site.
Brookyln25 September 2023 at 00:20
I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think. And i also want you to write some articles on african juju hat

Don't Miss

How to Create a Drop Down Menu in Blogger