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:

 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;
 }

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

Basic demo for the second (display: inline-block for the first-level lis) suggestion:

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

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