1
2
HTML
<ul class="red">
<li><a href="123" class="green">1</a>
<ul class="yellow">
<li><a href="123" class="hex">1</a>
<ul class="red2">
<li><a href="123" class="black">4</a>
<ol class="yellow">
<li><a href="123" class="blue2">a</a></li>
<li><a href="123" class="blue2">s</a></li>
<li><a href="123">d</a></li>
<li><a href="123">b</a></li>
<li><a href="123" class="blue2">g</a></li>
<li><a href="123">d</a></li>
</ol>
</li>
<li><a href="123" class="black">5</a></li>
<li><a href="123" class="black2">6</a></li>
</ul>
</li>
<li><a href="123" class="hex">2</a></li>
<li><a href="123" class="hex2">3</a></li>
</ul>
</li>
<li><a href="123" class="green">2</a></li>
<li><a href="123" class="green">3</a></li>
<li><a href="123" class="green">4</a></li>
<li><a href="123" class="green2">5</a></li>
</ul>
CSS
a {color:white; padding: 1px 10px}
.red {background:red;
width:25%;}
.red2 {background:red;
width:73%;}
.yellow {background:yellow}
.green {background:green}
.hex {background:#8b00ff}
.hex2 {background:#8b00ff; color:gold}
.black {background:black}
.black2 {background:black; color:gold}
ol > li:nth-child(2n+1) a {background:#daf7f7; color:gold}
ol > li:nth-child(2n+2) a {background:blue}
.green2 {background:green; color:black }
.blue2 {background:#6767e0; color:gold}