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