How can I create a submenu with CSS navigation? - html

Question

I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:
<ul id="menu">
<li id="nav-1">Home</li>
<li id="nav-2">Menu 1
<ul id="subnav-2">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li id="nav-3">Menu 2
<ul id="subnav-3">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li id="nav-4">Other tab without submenu
</li>
</ul>
I can't seem to find anything online to make this work. Any ideas?

Answer 1

If you don't mind using libraries I would recommend using bootstrap. It makes really easy creating menus with drop-down submenus and it comes with a default style that is quite neat. You should have a look at this:
http://twitter.github.com/bootstrap/javascript.html#dropdowns

Answer 2

If you need to do it on click, you'll need javascript. If you're ok with doing it on hover, you can do this:
#menu ul{
dispaly: none;
}
#menu > li:hover ul{
display: block;
}
Caveats: this will only work in IE7+. You'll also still need to position the dropdowns appropriately (absolute positioning, most likely).

Answer 3

Edit: Whoops! You said "click", not "hover". Sorry. I'll just leave this here in case it helps someone else.
I have an example of four techniques for pure CSS hierarchical menus from semantic markup here:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html
Here's an example of a single technique:
http://jsfiddle.net/FX4Dz/1/
<nav><ul>
<li>Header 1<ul>
<li class="sub">Subhead 1.1<ul>
<li>Subhead 1.1.1</li>
<li>Subhead 1.1.2</li>
</ul></li>
<li>Subhead 1.2</li>
<li>Subhead 1.3</li>
</ul></li>
<li>Header 2<ul>
<li>Subhead 2.1</li>
<li class="sub">Subhead 2.2<ul>
<li>Subhead 2.2.1</li>
</ul></li>
</ul></li>
</ul></nav>​
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul {
display:block;
position:absolute;
top:1.4em; left:-1px; /* align with respect to horizontal row */
width:8em; z-index:2
}
nav li li:hover ul {
left:8em; top:-1px /* subnav menus align next to their menu item */
}

Answer 4

The Swimbi app generates rather clean CSS code of drop down menu. You can use the app or just copy the CSS from the demo page http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea

Answer 5

http://css3menu.com/
Download this and make yourself one, then go through the code, edit, and learn