How can I create a submenu with CSS navigation?

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"><a href="home.php">Home</a></li>
<li id="nav-2"><a href="#">Menu 1</a>
<ul id="subnav-2">
  <li><a href="page1">Page 1</a></li>
  <li><a href="page2">Page 2</a></li>
  <li><a href="page3">Page 3</a></li>
</ul>
</li>
<li id="nav-3"><a href="#">Menu 2</a>
<ul id="subnav-3">
  <li><a href="page1">page 1</a></li>
  <li><a href="page2">page 2</a></li>
  <li><a href="page3">page 3</a></li>
</ul>
</li>
  <li id="nav-4"><a href="crickets.php">Other tab without submenu</a>
  </li>
</ul>

I can't seem to find anything online to make this work. Any ideas?

for that, you'll need javascript.

hjpotter92
– hjpotter92

2012-04-13 21:24:42 +00:00
Commented Apr 13, 2012 at 21:24 — hjpotter92
– hjpotter92, Commented Apr 13, 2012 at 21:24

txominpelu · Accepted Answer · 2012-04-13 21:27:46Z

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

answered Apr 13, 2012 at 21:27

txominpelu

1,0671 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Petrogad Over a year ago

+1 for bootstrap recommendation; so outstanding to know about when new to css.

txominpelu Over a year ago

Yep, it's quite a cool library with a good predefined style. The only problem is that many other webpages that use it will have the same style as yours but it's quite good for having a good looking web in seconds.

bradm Over a year ago

MASSIVE. Thank you, that's a great library. This actually fills a huge gap for functionality I was looking for in other areas of the site.

idrumgood · Accepted Answer · 2012-04-13 21:29:50Z

1

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).

answered Apr 13, 2012 at 21:29

idrumgood

4,93421 silver badges29 bronze badges

Comments

Phrogz · Accepted Answer · 2012-04-13 22:07:28Z

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 */
}

dmpost · Accepted Answer · 2014-04-25 09:58:38Z

1

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

edited Apr 25, 2014 at 9:58

answered Feb 3, 2014 at 9:20

dmpost

1065 bronze badges

Comments

squarephoenix · Accepted Answer · 2012-04-13 21:29:58Z

0

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

answered Apr 13, 2012 at 21:29

squarephoenix

1,0037 silver badges7 bronze badges

Collectives™ on Stack Overflow

How can I create a submenu with CSS navigation?

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related