Category Index - Aligning Nested Lists

HTML & CSS
1

I’m trying to build up a category index layout with CSS. I’d like the parent level to display inline with subsequent levels displayed vertically.

A good example of what I’m looking for would be ebay’s category display here…

Trouble is they are using a very odd layout technique and i’d like to stick to basic nested semantic lists if possible.

<ul>
  <li>For Sale
    <ul>
      <li>Cars
        <ul>
          <li>Red</li>
          <li>Green</li>
          <li>Blue</li>
        </ul>
      </li>
      <li>Parts</li>
    </ul>
  </li>
  <li>Wanted
    <ul>
      <li>Cars</li>
      <li>Parts</li>
    </ul>
  </li>
</ul>
2

I’m sure someone will say you should use dl/dt/dd for this, but I tend to shy away from those and use ul/li. They share nothing in comon, but those remind me of table tags (which confuse me).

Just say…

ul li {
display:inline;
}
ul ul li {
display:block;
}