HTML部分展示：
<ul class="first-menu-container">
? ? ? ? <li class="first-menus first-menu-active">
? ? ? ? ? ? <span>解决方案11</span>
? ? ? ? ? ? <ul class="second-menu-container">
? ? ? ? ? ? ? ? <li class="second-menus second-menu-active">
? ? ? ? ? ? ? ? ? ? <span>通用解决方案01</span>
? ? ? ? ? ? ? ? ? ? <ul class="third-menu-container">
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus third-menu-active"><span>网络安全1</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus">?<span>网络防护1</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus">?<span>云防火墙1</span> </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="second-menus">
? ? ? ? ? ? ? ? ? ? <span>通用解决方案02</span>
? ? ? ? ? ? ? ? ? ? <ul class="third-menu-container">
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus third-menu-active"><span>网络安全2</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络防护2</span>?</li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>云防火墙2</span></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="second-menus">
? ? ? ? ? ? ? ? ? ? <span>通用解决方案03</span>
? ? ? ? ? ? ? ? ? ? <ul class="third-menu-container">
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络安全3</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络防护3</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>云防火墙3</span>?</li>
? ? ? ? ? ? ? ? ? ? </ul></li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li class="first-menus">
? ? ? ? ? ? <span>解决方案22</span>
? ? ? ? ? ? <ul class="second-menu-container">
? ? ? ? ? ? ? ? <li class="second-menus">
? ? ? ? ? ? ? ? ? ? <span>通用解决方案04</span>
? ? ? ? ? ? ? ? ? ? <ul class="third-menu-container">
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络安全4</span>?</li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络防护4</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>云防火墙4</span></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="second-menus">
? ? ? ? ? ? ? ? ? ? <span>通用解决方案05</span>
? ? ? ? ? ? ? ? ? ? <ul class="third-menu-container">
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络安全5</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络防护5</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus">?<span>云防火墙5</span></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="second-menus">
? ? ? ? ? ? ? ? ? ? <span>通用解决方案06</span>
? ? ? ? ? ? ? ? ? ? <ul class="third-menu-container">
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络安全6</span>?</li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>网络防护6</span></li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="third-menus"><span>云防火墙6</span></li>?
????????????????????</ul></li>
???????????</ul>
???????</li>
</ul>
css部分：
*{
? ? ? ? /*首先清除页面其他效果*/
? ? ? ? margin: 0;
? ? ? ? padding: 0px;
? ? ? ? list-style: none;
}
? ? .second-menu-container{
? ? ? ? /*设置相对位置*/
? ? ? ? display: none;
? ? ? ? position:absolute;
? ? ? ? left: 200px;
? ? ? ? top: 0px;
? ? }
? ? .third-menu-container{
? ? ? ? display: none;
? ? ? ? position: absolute;
? ? ? ? left: 200px;
? ? ? ? top: 0px;
? ? }
? ? .third-menus{
? ? ? ? width: 200px;
? ? }
? ? .first-menus{
? ? ? ? width: 200px;
? ? ? ? padding-top: 10px;
? ? ? ? padding-bottom: 10px;
? ? ? ? border-top: 1px solid rgb(169, 169, 187);
? ? }
? ? .second-menus{
? ? ? ? width: 200px;
? ? ? ? padding-top: 10px;
? ? ? ? padding-bottom: 10px;
? ? ? ? border-top: 1px solid rgb(169, 169, 187);
? ? }
? ? .third-menus{
? ? ? ? width: 200px;
? ? ? ? padding-top: 10px;
? ? ? ? padding-bottom: 10px;
? ? ? ? border-top: 1px solid rgb(169, 169, 187);
? ? }
? ? .first-menu-active{
? ? ? ? /*以下二级三级效果类似*/
???????? /*添加箭头效果，暂时以>代替，若有其他需求，最好使用图标*/
? ? ? ? background-color: rgb(174, 193, 211);
? ? }
? ? .first-menu-active::after{
? ? ? ? content: ">";
? ? ? ? float: right;
? ? ? ? margin-right: 10px;
? ? }
? ? .second-menu-active{
? ? ? ? background-color: rgb(174, 193, 211);
? ? }
? ? .second-menu-active::after{
? ? ? ? /*添加箭头效果，暂时以>代替，若有其他需求，最好使用图标*/
? ? ? ? content: ">";
? ? ? ? float: right;
? ? ? ? margin-right: 10px;
? ? }
? ? .third-menu-active{
? ? ? ? /*添加选中颜色*/
? ? ? ? background-color: rgb(174, 193, 211);
? ? }
js部分：
//一级效果js
//一级与二三级实现方法类似，只用换掉classname即可
var firstMenus = document.getElementsByClassName('first-menus')
? ? for (let i = 0; i < firstMenus.length; i++) {
? ? ? ? firstMenus[i].addEventListener('click',function(){
? ? ? ? ? ? //激活效果
? ? ? ? ? ? for (let k = 0; k <firstMenus.length; k++) {
? ? ? ? ? ? ? ? //实现点击下一级后上一级颜色消失
? ? ? ? ? ? ? ? firstMenus[k].classList.remove('first-menu-active')
? ? ? ? ? ? }
? ? ? ? ? ? this.classList.add('first-menu-active')
? ? ? ? ? ? //收起
? ? ? ? ? ? var secondMenuContainer =document.getElementsByClassName('second-menu-container')
? ? ? ? ? ? for (let j = 0; j < secondMenuContainer.length; j++) {
? ? ? ? ? ? ? ? secondMenuContainer[j].style.display='none'
? ? ? ? ? ? }
? ? ? ? ? ? //展开
? ? ? ? ? ? var ul = this.getElementsByClassName('second-menu-container')[0]
? ? ? ? ? ? ul.style.display='block'
? ? ? ? })
? ? }
//二级
? ? var secondMenus = document.getElementsByClassName('second-menus')
? ? for (let x = 0; x < secondMenus.length; x++) {
? ? ? ? secondMenus[x].addEventListener('click',function(){
? ? ? ? ? ? //激活
? ? ? ? ? ? for (let k = 0; k <secondMenus.length; k++) {
? ? ? ? ? ? ? ? secondMenus[k].classList.remove('second-menu-active')
? ? ? ? ? ? }
? ? ? ? ? ? this.classList.add('second-menu-active')
? ? ? ? ? ? //收起
? ? ? ? ? ? var thirdMenuContainer =document.getElementsByClassName('third-menu-container')
? ? ? ? ? ? for (let y = 0; y < thirdMenuContainer.length; y++) {
? ? ? ? ? ? ? ? thirdMenuContainer[y].style.display='none'
? ? ? ? ? ? }
? ? ? ? ? ? //展开
? ? ? ? ? ? var thirdMenuContainer = this.getElementsByClassName('third-menu-container')[0]
? ? ? ? ? ? thirdMenuContainer.style.display='block'
? ? ? ? })
? ? }
//三级
? ? var thirdMenus = document.getElementsByClassName('third-menus')
? ? for (let x = 0; x < thirdMenus.length; x++) {
? ? ? ? thirdMenus[x].addEventListener('click',function(){
? ? ? ? ? ? //激活
? ? ? ? ? ? for (let k = 0; k <thirdMenus.length; k++) {
? ? ? ? ? ? ? ? thirdMenus[k].classList.remove('third-menu-active')
? ? ? ? ? ? }
? ? ? ? ? ? this.classList.add('third-menu-active')
? ? ? ? })
? ? }
