Make a tree with parents and path highlighted

Question

I wanted to make some fancy menu displayed as a tree, where we could see the relations between each page and their parents easily.

It's not far from working but I need your help and ideas.

Here is what I did : http://jsfiddle.net/bXCHn/6/

So for example, if you hover "page 4 - 3 - 2", it will highlight "page 4 - 3" and "page 4". This is basic HTML and CSS and if you delete the jQuery script, it will still work.

jQuery permits us to add a class that will highlight the path (the li borders) of each previous elements in the tree. It will not take in account the first level of navigation :

$(this).prevAll('li:not(.first-lvl-item)').addClass('hover-prev-item');

Now keep the same example as above. You will see that the first line going down from "page 4" goes too far (in fact it's using the entire li element). I would like it to stop in front of "page 4 - 3"...

I don't know if I have to change all my structure or if I should handle it in another way. I tried a lot of things but nothing worked...

Thanks for your help !

Answer 1

I created a fiddle where highlighting wouldn't work without Javascript. Not that good, but it works.

The CSS3-option nth-of-type is just supported as shown, so is this solution:

 Feature        Chrome  Firefox (Gecko) Internet Explorer   Opera   Safari
 Basic support  1.0     3.5 (1.9.1)     9.0                 9.5     3.1

I did a rework on the design and based it on an amount of spans I put in front for the count of levels :) http://jsfiddle.net/bXCHn/10/

What's left to do? Refactor the way I used the nth-of-type selector and try to get it done by javascript. Currently it does just support as deep levels as you define in your CSS-file.