StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Simple with Multi-level Depth Support</h2> <p><strong>UPDATED: Tweaked to accommodate hover</strong></p> <p><strong>No extra HTML needed, no having to limit depth because of css selector chaining, as it supports any number of levels deep without having to adjust your css at all for those levels (no keeping track of "padding" to set on the next level deep).</strong></p> <p>This works well with only a two minor limitations (which I don't believe will factor into affecting you).</p> <p><a href="http://jsfiddle.net/7u87c/54/" rel="nofollow"><strong>See fiddle demo.</strong></a></p> <p>Add a <code>position: relative</code> to your <code>ul.tree</code>, but keep all the child elements the default <code>static</code> position. Then change/add the following css:</p> <pre><code>ul.tree a { display: block; height:30px; line-height: 30px; padding-left: 15px; } /* this is making our bottom border, but sizing off the .tree ul width */ ul.tree a:before { content: ''; height: 30px; /* match your <a> height */ position: absolute; left: 0; right: 0; z-index: -1; border-bottom-width: 1px; border-bottom-color: lightgray; border-bottom-style: solid; } ul.tree a + ul { padding-left: 15px; /* this is your spacing for each level */ } ul.tree a:hover:before { background-color: #DDDDDD; } </code></pre> <p>The limitations are that no child elements can have a position set and we are using a pseudo-element (which means it cannot be used for some other feature, but that is probably not an issue either).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload