Skip to main content

How To Make A Drop Down Menu

Hello. I got a request from Tane to do this tutorial. I hope this is helpful. :)



Now before doing this, it may be best if you set up a test blog and tested this out on there so you can tweak the code to fit your needs and then when it's ready, you can put it on your main blog. But you can do whatever works for you. :)

1. Go to your blogger dashboard and select the blog you'd like to the add the drop down menu to.
2. Go to Layout >>> Add Gadget >>> HTML/Javascript and paste the following code into it.
<!-- start navmenu -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>Home</a></li>
<li><a href='LINK'>CATEGORY 1</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
</ul>
</li>
<li><a href='LINK'>CATEGORY 2</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<!-- ADD MORE CATEGORIES HERE -->
</ul>
</div>
</div>
<!-- end navmenu -->

3. To add more categories and sub-categories, continue pasting this code:

<li><a href='LINK'>CATEGORY 3</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
</ul>
</li>

4. Save the gadget once you've edited to fit your needs. When you view it on your live blog, it may look a little wacky so don't panic. You just need to add some CSS to style it.
5. Go to Template >>> Customize >>> Add CSS and paste this code in the box.

/* Spacing & Border of First Link in Navigation */
.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eeeeee; }
/* Background & Border of Navigation */
.tabs-inner .widget ul { background: #ffffff; border: 0px solid #eeeeee; text-align: center !important; }
/* Font, Color & Border of Links */
.tabs-inner .widget li a { font-family: new times; color: #333333; border: 0px solid #ffffff; }
/* Font & Color of Rollover Links */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #eeeeee; background-color: #ffffff; text-decoration: none; }
/* Center Navigation */
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
/* ----- NAVMENU Styling ----- */
#NavMenu { width: 800px; /* Change width of background */ height: 40px; /* Change height of background */position: relative;
margin: 0 auto;
padding: 0;
border: 0px solid black; /* Change Border Around Navigation */ }
#NavMenuleft { width: 800px; /* Change width of navigation */float: none;
margin: 0 auto;
padding: 0; }
#nav { margin: 0 auto; padding: 0; border: 0px solid black; }
#nav ul { float: none; list-style: none; margin: 0; padding: 0; overflow: visible; }
#nav li a, #nav li a:link, #nav li a:visited { color: #666666; /* Change color of link */display: block;
margin: 0;
padding: 10px 15px 10px; /* Change spacing */ }
#nav li a:hover, #nav li a:active { color: #0099CC; /* Change color of text on hover over */margin: 0;
padding: 10px 15px 10px; /* Change Spacing */text-decoration: none; /* Change to underlined or none for look when hovered over */ }
#nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; /* Change background colour of drop down text */width: 150px; color: #333; /* Change colour of text */float: none;
margin: 0;
padding: 7px 10px; /* Change Spacing */ }
#nav li li a:hover, #nav li li a:active { background: #0099CC; /* background color of drop down items on hover over */color: #eeeeee; /* text color of drop down items on hover over */padding: 7px 10px; }
#nav li { float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black; }
#nav li ul { z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

6. You can customize the codes in red.
7. Don't forget to save and view your template.

Comment below if you have any questions. :)

xx Nicole Rose

Comments

  1. Thanks so much for this. I've been wondering about it for ages:)

    ReplyDelete
  2. Love this, thanks. Now if only I could figure out to change the color of my scroll bar...*hint, hint* ;)

    Sophia.xo

    ReplyDelete
  3. Thank you so much. You should do more tutorials like this.

    ReplyDelete

Post a Comment

All comments I receive are cherished for many hours after reading them. Thank you for taking the time to type something to me.

xx Nicole Rose

Popular posts from this blog

So this is where I'm at.

Hi friend. How are you? I hope this post meets you well. Today I wanted to write about this little space. My corner of the Internet.

After many attempts to give it a major face lift / rebrand / vibe / mission I figured out that the girl I was in 2012 when I originally started this blog is no longer who I am.

So let's start fresh.
Hi, I'm Rosie. I am a college student and a creator of many crafts. I enjoy writing Young Adult fiction, playing piano, singing at the top of my lungs, and, above all, making other people laugh. Right now I am pursuing a degree in art therapy, which means my future job will be helping people express themselves in a safe environment with someone who loves them. I have tried to be many things on the Internet, from an American Girl doll hoarder to a make-up artist, but nothing has really clicked with me.
Not until now.
I have always been a Christian. My entire life I have identified as being a follower of Jesus Christ. But the thing about growing up in t…

Good-bye.

Have you ever had that one thing you've tried to make work but never could? This could be anything in your personal life, from piano notes to paragraphs in a blog post.

Well, I've been trying and trying and trying and trying for years now to get blogging to work for me. At one point in my life, this was my passion. I lived for your comments, your friendship, and the purity of sharing whatever was in my heart with the world. But I don't feel warmth or connection anymore. In fact, I feel rather lost. Like I'm shouting into an abyss, vying for attention and something to fill my inner void. This feeling comes more often than I care to admit, and I've pushed through all this time with the thought that it will get better. That all I have to do is keep trying and it will work out.

But it hasn't. And I'm out of ideas.

This isn't to say I won't be back. That I won't hit a creative stride in the next week and decide to share something epic with you. But f…

Angel by the Wings (Piano Cover)

Many months ago I fell in love with this song. And like anyone who has fallen in love, it's stuck with me -- to the point where I can now play it with my eyes closed.
I think I love it so much because the lyrics go like:
"You can, you can do anything, anything
You can do anything"
Over and over. In these past few months, I've needed those power phrases on repeat.



Thank you, dear music, for being the inspirational piece to get me back into taking piano lessons. Thank you for inspiring me to learn other pieces (and yet always return to you).
It scares me to share this with you because it is imperfect, our piano needs tuned, it's not visually stimulating, or even a good quality soundtrack. But I think I would be doing myself an injustice if I didn't.
Besides, everyone has to start somewhere.
Enjoy.