How to create a dropdown menu like google's 'More' button? - css

Question

On google homepage, if you click the more button, a menu opens below just that button, like this:
How can I do a similar thing with one of the tabs in the navigation bar of my website using css/javascript/jquery?
Edit: To be more specific, I'm wondering how to accomplish the CSS part of this, i.e:
How to make an up/down arrow graphic show on the tab when the dropdown is toggled. (i.e when toggled, show down arrow, when not, up arrow). (Rather than just putting an <img> i'd rather use a background-image to toggle the arrows)
How to have the new list pop down below the tab and aligned with it.

Answer 1

This is an example for one way this could be done. Of course, you can experiment with diff methods and stuff, but this is a basic working solution.
A dropdown element to be toggled by clicking a link is pretty good.
<div id="topBar">
<a href="#" id="more">More
<span id="arrow">
<span id="arrdown">▼</span>
<span id="arrup">▲</span>
</span>
</a>
<div class="dropdown">
One
Two
Three
</div>
</div>​
Then you make it toggle with a JS click.
$('#more').click(function() {
$(this).toggleClass('active');
$(this).next('.dropdown').toggle();
return false;
});
$('.dropdown a').click(function() {
return false;
});
css:
body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }
​
Here's a live example with CSS: http://jsfiddle.net/ZUPBj/

Answer 2

There are many different approaches to this, one of the simplest:
Create a hidden div that get's toggled when the menu item is clicked.
<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
$(".menu").on("click",function(){
$(".dropDown").toggle();
});
</script>​​​​
JsFiddle

Answer 3

Some googling will find you plenty of tutorials online. I searched for "building drop down menus in html". These links below are some of the better tutorials I found.
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/
http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/
Basically what they're doing is displaying a hidden div when the user hovers over the first level of the menu.