Vertical List Within a Horizontal List

Question

I'm trying to create a basic navigation and I'd like to have a horizontal list with a vertical items list:

Header 1     Header 2     Header 3
 -Sub 1       -Sub 1       -Sub 1
 -Sub 2       -Sub 2       -Sub 2
 -Sub 3       -Sub 3       -Sub 3

I'm shooting for this markup, or something similar:

<ul>
    <li><strong>Header 1</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 2</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 3</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>

</ul>

I'm trying to avoid floating divs for each header section.

I've been trying to use two css classes for the uls, with the outer set to display:inline and the inner to display:block, but I can't get it to work.

How do I do this, or do I have to float divs?

Answer 1

You can float the first-level lis (to avoid 'floating divs'), or use display: inline-block for the first-level lis. Bearing in mind that floating will work for IE6+, whereas inline-block is restricted to only those elements that would normally display inline.

Basic demo for the first (float the first-level lis) suggestion: http://jsbin.com/abika5

  ul {width: 90%; margin: 0 auto; }
  ul > li {float: left; width: 32%; }
  ul > li > ul {display: block; width: 100%; }
  ul > li > ul > li {display: block; float: none; }

Basic demo for the second (display: inline-block for the first-level lis) suggestion: http://jsbin.com/ocimu

  ul {width: 90%; margin: 0 auto; }
  ul li {display: inline-block; width: 32%; }
  ul li ul {width: 100%; }
  ul li ul li {display: block; }