Styling Nested Lists in CSS

Question

I would like to build a tree like navigation interface in pure markup (that is, without needing javascript/jquery etc.).

Unordered lists <ul> seem like the best solution, and I have found this tutorial on simplebits.com is very close to the solution I need. However, the author defines the stylesheet with the assumption that the final/max depth of any branch is already known:

#sitemap li ul li ul li {
    padding-left: 16px;
    background: url(bullet.gif) no-repeat 0 50%;
}

I want to know if there is way to allow the markup to descend "infinitely" and have the styling support this seamlessly.

If you need more clarification on this, please just let me know.

Answer 1

There are tutorials on this but there are two problems:

1. IE6 doesn't support :hover on tags other than anchors so you need a Javascript solution for that browser; and
2. It's actually really complicated to get it working consistently across the major browsers.

Consider the alternative using jQuery and the superfish (inspired by suckefish) plug-in:

<ul class="menu">
  <li>...
</ul>
<script type="text/javascript">
$(function() {
  $("ul.menu").superfish();
});
</script>

Done.

If you do go the (semi-)pure CSS route, I highly recommend you use one of the existing frameworks for this (like suckerfish or a derivative). Otherwise you'll just be pulling your hair out and spending a lot of time to get it to work right.

To answer your question about depth: that rule you mentioned essentially is going to infinite depth. Remember a space in CSS is a descendant selector not a child selector. The reason for the repeated groups is so that the rule only applies from (say) the third level down.

That's because the first and second levels will have special stylings. The first will be a horitzontal or vertical bar. The second will popout from that but from the third level down it will consistently popout in the same way.

Answer 2

How about assigning a class to the unordered list elements?

#sitemap li.tree
{
   padding-left: 16px;
}

I don't see why this would not work but correct me if I'm wrong.

Answer 3

the markup you supplied should work for any further elements without having to specify them directly.

for example:

#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)

so the last rule would automatically be applied to levels 4, 5, 6 and beyond.

unless you want specific styling for ALL levels, then you should be fine.