HTML
<ul class="tree"> <li>List item 1</li> <li>List item 2 <ul> <li>List item 2.1</li> <li>List item 2.2</li> <li>List item 2.3</li> ... ... </ul> </li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> ... ... </ul>CSS
ul.tree, ul.tree ul { list-style:none; margin:0; padding:0; } ul.tree ul { margin-left:10px; background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%; } ul.tree li { margin:0; padding:0 12px; font-size:14px; line-height:20px; color:#369; font-weight:bold; } ul.tree ul li { background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0; } ul.tree ul li.last, ul.tree ul li:last-child { background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%; }Demo
Referensi: Turning List into Trees
Murni CSS/Tanpa Gambar
Berikut ini ialah versi CSS yang Saya buat menurut rujukan di atas. Tanpa gambar, hanya memakai pseudo element:
CSS
ul.tree, ul.tree ul { list-style:none; margin:0; padding:0; } ul.tree ul { margin-left:10px; /* indentation */ position:relative; } ul.tree ul:before { content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1px solid; } ul.tree li { margin:0; padding:0 12px; /* indentation + 2 */ font-size:14px; line-height:20px; /* default list item `line-height` */ color:#369; font-weight:bold; position:relative; } ul.tree ul li:before { content:""; display:block; width:10px; /* same with indentation */ height:0; border-top:1px solid; position:absolute; top:10px; left:0; } ul.tree ul li:last-child:before { background:white; /* same with body background */ height:auto; top:10px; /* (line-height/2) */ bottom:0; }