我一直想写技术博客，一直没插手。
二级菜单上的箭头一直不擅长改，最后想了想，还是改了。
正好有时间和精力，现在分成和我一样寂寞的大象，期待大佬告诉我。
首先，让我们完成二级菜单。 二级菜单可以通过jQuery轻松实现。
我们先看看jQuery代码。 其中评论是我刚添加的。 希望能帮助大家理解。
$(document ).ready (function ) )。
//展开和收缩二级导航
var isTrue=false； //先定义为false
$'.nav-item'.click(function ) ) ) )。
$(this ).next('.Subnav ' ).slideToggle )； //轻松实现2级菜单。 也就是说，点击以切换显示和隐藏
if(istrue ) {
$(this ).find ) (I ) (.CSS ) (transform )、(rotate )0deg ) )；
isTrue=false； 更改为false，下一个更改为true以实现箭头旋转
}else {
$(this ).find ) (I ) (.CSS ) (transform )、(rotate ) 90deg ) )；
isTrue=true；
}
)；
)；
如果需要html和css代码，请参阅： 其中有些是我添加到自己的后台管理系统中的，大家重点看就好了。
让我们先看看html代码：
让我们看一下css :
. nav-item{
列表样式类型： none；
}
. nav-item a，
. subnav-item a{/*导航和辅助导航a链接样式*/
height: 55px；
line-height: 45px；
padding: 8px 20px 8px 40px；
color: #BDBDC0；
显示： block；
}
. nav-item a:hover，
. subnav-item a:hover{
color:白色；
}
. nav-item i{
浮点：轻型；
font-size: 20px；
line-height: 40px；
transition: 0.5s；
}
. nav-item:before{
内容： '；
width: 5px；
height: 0；
背景色： # 009688；
位置： absolute；
top: 0；
left: 0；
}
. nav-item:hover:before{
height: 100%；
}
. subnav{/*二次菜单区域*
显示：无；
文本索引： 2em；
}
. subnav-item:hover{
背景色： # 009688；
color:白色；
}
以上，可以简单地实现2级菜单和箭头的旋转。 其中重要的是jQuery的部分。 如果有需要的东西的话请看一下。 请您指导。