Drop-down menus are really cool, but also pretty complicated. You really have to have a basic understanding of HTML code in order to get them to work properly. To get a real basic overview of how html code works, I suggest you check out this post by the How-To Gal. Now, on to the drop down menu.
In blogger, you're going to want to add an html/javascript widget from the Design menu. Then, you get to enter in some code. What follows below is the code that I use for my blog header. It was originally designed by my blog designer A Blog to Brag About. I have tweaked it a little since she installed it and added my own links and such. Each color is a different menu item.
<div style="position:absolute; margin-top:-32px; margin-left:210px; text-align:center;"><ul id="nav">
<li class="top"><a href="http://yourlinkhere.com" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" class="top_link"><span>About</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">About Me</a></li>
<li><a href="http://yourlinkhere.com">Review Policy</a></li>
<li><a href="http://yourlinkhere.com">Advertise</a></li>
<li><a href="mailto:youremailaddress@yourprovider.com">Contact</a></li>
</ul>
<li class="top"><a href="#" class="top_link"><span>Reviews</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">By Author</a></li>
<li><a href="http://yourlinkhere.com">By Title</a></li>
<li><a href="http://yourlinkhere.com">3 Stars</a></li>
<li><a href="http://yourlinkhere.com">4 Stars</a></li>
<li><a href="http://yourlinkhere.com">5 Stars</a></li>
</ul>
<li class="top"><a href="#" class="top_link"><span>Features</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">In My Mailbox</a></li>
<li><a href="http://yourlinkhere.com">It's Monday!</a></li>
<li><a href="http://yourlinkhere.com">Teaser Tuesday</a></li>
</ul>
<li class="top"><a href="http://yourlinkhere.com" class="top_link"><span>Awards</span></a></li></li></li></li></ul></div>
So, if you replace the names and links in the code I've given you there, you should have a functioning menu bar. If you want to add more things on the top, all you have to do is add this line of code:
<li class="top"><a href="http://yourlinkhere.com" class="top_link"><span>NAME OF LINK</span></a></li>
If you want to add a menu item with sub-menu items in it, use this code:
<li class="top"><a href="#" class="top_link"><span>NAME OF LINK</span></a>
<ul class="sub">
<li><a href="http://yourlinkhere.com">Submenu Item</a></li>
<li><a href="http://yourlinkhere.com">Submenu Item</a></li>
<li><a href="http://yourlinkhere.com">Submenu Item</a></li>
<li><a href="mailto:youremailaddress@yourprovider.com">Email address</a></li>
</ul>
I hope that makes at least a little sense. If you can't get it to work, let me know in the comments and I'll try to get it to work for you.
Now, a scrolling marquee with blog buttons. This is one of my favorite things. I LOVE blog buttons. But, I just don't have enough space on my sidebars to display them all. A scrolling marquee widget is the perfect solution.
<marquee scrolldelay="100" behavior="scroll" direction="up" onmouseover="if (this.stop) { this.stop() }" scrollamount="2" onmouseout="if (this.start) { this.start() }" height="600"><center>ENTER BUTTON CODES HERE</center></marquee>
Here's what this code means. The scrolldelay is how fast your marquee is going to go. You can change it in increments of 100 the higher the number the faster the scroll. You can also change the height of the marquee to as short or tall as you'd like. Play around with the options to see what you like best. What I like about this code is that when people mouse over your buttons, they will stop scrolling. Make sure to grab my button to put on your sidebar! Happy button collecting!
If you have a question or topic you'd like to be covered in Design HTMiLy, please fill out the form below.
