Create a tree with parents and select the selection

I wanted to make some fancy menu display like a tree, where we could easily see the relationship between each page and their parents.

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

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

So, for example, if you move “page 4 - 3 - 2”, it will highlight “pages 4 - 3” and “page 4”. This is basic HTML and CSS, and if you remove the jQuery script, it will still work.

jQuery allows you to add a class that will highlight the path (borders li) for all previous elements in the tree. It does not take into 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 uses the whole element li). I would like him to stop in front of "page 4 - 3" ...

I don’t know if I have to change my whole structure or if I will process it differently. I tried a lot of things, but nothing worked ...

Thank you for your help!