It was modified in the original secondary directory, and a demonstration was given first
Here is css
/*bg macji(http://www.macji.com)*/ ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} .m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} .m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} /*First level*/ .m_menu_content p{height:22px;line-height:22px} .m_menu_content pa{ color:#666633; font-weight:bold; text-decoration:none; background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px; padding:0 0 0 30px; display:block } .m_menu_content pa:hover{color:#fe8005;font-weight:bold;text-decoration:none} .m_menu_content p a.on{background-position:8px -18px} /*Second level*/ .menu2{} .menu2 li{line-height:22px} .menu2 a{color:#000; text-decoration:none; display:block; padding:0 0 0 40px; background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px } .menu2 a.on{background-position:18px -18px} /*Level 3*/ .menu2 ul{} .menu2 ul a{ background-position:30px -39px; padding:0 0 0 50px; color:#666633; text-decoration:underline } .menu2 ul a:hover{background-color:#f5f5f5; color:#f60}The directory is looped, I wrote it to death. Here is a js
/* Here I write it directly. According to the incoming id number, it is normal to determine whether it is displayed. If it is not displayed, it is displayed. You can loop out the directory with the server-side language*/ function setMenuList(num){ var p = document.getElementById('p' + num); var ul = document.getElementById('ul' + num); if(ul.style.display == 'none'){ ul.style.display = 'none'){ ul.style.display = 'none'; }else{ ul.style.display = 'none'; p.className = ""; } }Demo view