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

27 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 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
Aman9 May 2019 at 07:41
medical college in Karnataka government private medical college in Karnataka
meldaresearchusa5 August 2019 at 06:46
The consequent emergence of numerous companies that purport to offer Research Paper Writing Services to students has made it imperative for students to assess companies that provide Write My Research Paper supply services to students.
mikerock29 August 2019 at 00:08
thanks for sharing it How to turn off iPhone XR
how to make slime3 January 2020 at 07:30
Very good, I think I found the knowledge I needed. I will see and refer some information in your post. thank you!
subway surfers
anonymus12 February 2020 at 14:21
Poker online situs terbaik yang kini dapat dimainkan seperti Bandar Poker yang menyediakan beberapa situs lainnya seperti http://62.171.128.49/hondaqq/ , kemudian http://62.171.128.49/gesitqq/, http://62.171.128.49/gelangqq/, dan http://62.171.128.49/seniqq. yang paling akhir yaitu http://62.171.128.49/pokerwalet/. Jangan lupa mendaftar di panenqq
Celine.V17 February 2020 at 23:51
peraktoto
peraktoto
peraktoto
peraktoto
peraktoto
peraktoto
peraktoto
peraktoto
peraktoto
anonymus25 February 2020 at 00:15
shopeetoto
shopeetoto
shopeetoto
shopeetoto
shopeetoto
shopeetoto
shopeetoto
shopeetoto
Gusion29 February 2020 at 07:36
http://62.171.145.61/anugerahtoto/
Togel Online
Poker Online
bandarq
Bandar Kometqq
capsa online
agen online qq
agen poker
Gusion29 February 2020 at 07:37
pelangiqq
pelangiqq
pelangiqq
pelangiqq
pelangiqq
pelangiqq
pelangiqq
pelangiqq
summaorublogger13 March 2020 at 04:13
Comment obtenir un compte Netflix gratuit sans carte de crédit 2020 netflix compte
Teresa Halminton2 June 2020 at 04:06
I really like using Gmail but I can't solve my trouble without gmail email login, I think this website are gonna be helpful to you.
adam10406418 June 2020 at 22:01
Thanks for sharing
Employee Transport Management System
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
Robby16 September 2020 at 08:12
Awesome blog post, Thanks a ton for sharing such stuff.
Pharmaceutical consultant
Regulatory consulting
Pharmacovigilance consultants
Clinical research consultant
Regulatory affairs services
510(k) submission
Pharmacokinetics in drug development
NDA consulting
Pharmaceutical strategy consulting
Generic drug development
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
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

Don't Miss

How to Create a Drop Down Menu in Blogger