I make the menu. Tell me how to implement a menu with three or four levels so that when you click on an item, the next block opens and the other items close. It turned out to implement only one block of sub-items. How to do more?
<div id="menu"> <div class="sub-one"> <ul class=" scroll-pane"> <li><a href="#">Backgrounds</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">HTML & CSS</a></li> <li><a href="#">Icons</a></li> <li><a href="#">PSD</a></li> <li><a href="#">Templates</a></li> <li><a href="#">Tutorials</a></li> </ul> </div> <div class="sub-two"> <ul class="scroll-pane"> <li><a href="#">About PSDGraphics</a></li> <li><a href="#">Commercial Use</a></li> <li><a href="#">Terms Of Use</a></li> <li><a href="#">Terms Of Use</a></li> </ul> </div> <div class="sub-two"> <ul class="scroll-pane"> <li><a href="#">1About PSDGraphics</a></li> <li><a href="#">2Commercial Use</a></li> <li><a href="#">3Terms Of Use</a></li> </ul> </div> $('.sub-one li').click(function () { $('.sub-two').eq($(this).index()).toggle().siblings('.sub-two').hide(); }); .scroll-pane { float: left; height: 100px; width: 100px; } .sub-two { display: none; } 