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.