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

16 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
TONEY CABONE MUSIC PROMOTER AND MORE25 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
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.
Anonymous31 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.

Don't Miss

How to Create a Drop Down Menu in Blogger