AssirtyGots
New Member
I'm having trouble coming up with CSS for a hierarchical display, like a tree of files and folders. I use nested unordered lists:\[code\]<ul> <li>animals<ul> <li>dogs</li> <li>cats</li> </ul></li></ul>\[/code\]They display nicely with the proper CSS minus the connecting lines. I need the lines to connect. I do this with the following CSS:\[code\]ul ul li:before { content: ""; padding: 15px; border: 1px solid #000; border-width: 0 0 1px 1px; border-radius: 0 0 0 10px; position: absolute; left: -22px; top: -15px;}\[/code\]Problem is the lines overlap the icons for the animals, dogs and cats. I tried changing z-index's to no effect. Is there a better way to achieve this with CSS? Or is there another way to get the z-index making sense?