<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul li{ list-style: none; } .bigbox >li { width:auto; position: relative; } .bigbox >li >ul{ display: none; position: absolute; left: 100px; top:0px; } .bigbox >li >ul >li >ul{ display: none; position:absolute; left: 100px; top: 0; } </style> </head> <body> <ul class="bigbox"> <li> <a href="#">daohang-01</a> <ul> <li> <a href="#">neirong1</a> <ul> <li>neirong2</li> </ul> </li> </ul> </li> <li> <a href="#">daohang-02</a> <ul> <li> <a href="#">neirong2</a> <ul> <li>neirong22</li> </ul> </li> </ul> </li> <li> <a href="#">daohang-03</a> <ul> <li> <a href="#">neirong3</a> <ul> <li>neirong33</li> </ul> </li> </ul> </li> </ul> </body> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ $('.bigbox >li >a').click(function(){ $(this).siblings('ul').show(); $(this).parent('li').siblings().children('ul').hide(); }); $(".bigbox >li >ul >li >a ").click(function(){ var box=$('.bigbox >li >ul>li >ul'); $(box).hide(); $(this).siblings('ul').show(); }); }) </script> </html>