HTML CSS examples for CSS Widget:UL Element
Dashed-styled list linking divs
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .category {<!-- www . jav a2 s .c o m--> width:96%; height:4em; background-color:Chartreuse; margin:3em; margin-bottom:0; } .forum { width:auto; height:4em; background-color:yellow; color:blue; border:dotted; margin-left:5em; position:relative; } .sub-forum { width:auto; height:4em; color:pink; background-color:OrangeRed; border:dotted; margin-left:8em; position:relative; } .forum:before, .forum:after, .sub-forum:before, .sub-forum:after { content:" "; position:absolute; left:-2.6em; top:-56%; bottom:51%; z-index:-2; } .forum:before, .sub-forum:before { border-left:4px dotted grey; } .sub-forum:before { left:-5.6em; width:4em; border-right:4px dotted BlueViolet; box-sizing:border-box; } .forum:after, .sub-forum:after { width:2.6em; border-bottom:4px dotted Chartreuse; } </style> </head> <body> <div id="Forums"> <div class="category"> Lorem ipsu </div> <div class="forum"> Lorem i </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="forum"> Lorem i </div> <div class="forum"> Lorem i </div> <div class="forum"> Lorem i </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="forum"> Lorem i </div> <div class="category"> Lorem ipsu </div> <div class="forum"> Lorem i </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="sub-forum"> Lorem ipsum </div> <div class="forum"> Lorem i </div> <div class="category"> Lorem ipsu </div> <div class="forum"> Lorem i </div> </div> </body> </html>