HTML reset copy

<ul id="net"> <li><span class="net1">Menu</span> <ul class="net2"> <li>Pages#1</li> <li>Pages#2</li> <li><span class="net1">Menu#1</span> <ul class="net2"> <li>Pages#1</li> <li>Pages#2</li> <li><span class="net1">Menu#2</span> <ul class="net2"> <li>Pages#1</li> <li>Pages#2</li> <li>Pages#3</li> <li>Pages#4</li> </ul> </li> </ul> </li> </ul> </li> </ul>

CSS reset copy

ul, #net { list-style-type: none; } #net { margin: 0; padding: 0; } .net1 { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: Tahoma; font-size: 20px; text-transform: capitalize; color:#000; } .net1::before { content: "\25B6"; color: #c00; display: inline-block; margin-right: 6px; } .net1-down::before { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .net2 { display: none; font-family: Tahoma; font-size: 20px; text-transform: capitalize; color:#555; } .net3 { display: block; }

Js JAVASCRIPT reset copy

var toggler = document.getElementsByClassName("net1"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".net2").classList.toggle("net3"); this.classList.toggle("net1-down"); }); }