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

How to Begin Your Self-Love Journey This Year

When I originally had the idea for this piece of writing I’m about to share with you, I was in a place of transition. I didn’t know my place in the world, I didn’t know if I was worth it and I certainly didn’t feel like I could love myself. Here I am almost a year later, an example of how this works - if you choose to put it into practice. You can improve and learn to love yourself. You can take the steps that bring you into a better place.

I won’t say it was easy and I certainly won’t say I had overnight success, but when you learn to fight your battles one at a time, you’ll be able to look back and see how far you’ve come.

Are you ready to take the first step?



Self Love: Step one I have always been a timid person. I’ve always had trouble keeping the standards I have for myself something below what I deem “perfect”. I enjoy discipline and when I don’t know what to do or my world is shaken, I’m hard on myself.

That’s just who I am.

With that said, I've always felt like I was not a…

A Love Letter

To my dear, blooming Rose - Attached to this letter is not only my love, but my gratitude, thankfulness and a small box of decadent dark chocolates. I would've had flowers delivered too, but no measly plant could ever compare or express my feelings toward you.

Ahh, my dear. You are my truest bundle of joy. It does not matter what mood you are in - you light up my day in the most wonderful of ways.

Your smile makes the sun jealous. Your embrace makes me feel full. Your laughter - so thick and loud - makes me want to laugh too.

What I love most is when you are truly and purely being yourself - because that's who you're meant to be.

With much love and kisses blown with a wink,
Your Secret Admirer

PS: Maybe we could share those chocolates later, eh?


+ + +
When you need some uplifting, write yourself a love letter. Be silly and positive. Analyze yourself. Amp up your best qualities. De-sock your feet as you write and wiggle your toes as your write (then put your socks back on b…

How to Manage Your Creative Time

Being productive can be hard, especially when you have too many things on your to-do list, and have no idea where to start. As a human who likes to pack a lot of stuff into their day, I've struggled with managing my blogging time and balancing it with everything else I need to do.

Here are some tips to help you manage your time (whether it be for blogging or anything else). :)


Being productive can be hard, especially when you have too many things balanced on your plate. Most of the time, you don’t know where to start. As a human who likes to pack a lot of productivity into their day, I’ve struggled with managing my time - creatively and in the other areas of my life. The balancing act is hard, so I’ve compiled some of the tips that work best for me.


PS: There’s a link to a print out of the exercises that correspond with these tips at the bottom of this!

Figure out what needs to be done Before you can manage your time, you need to figure out what it is you want to get done. Do you w…