照片是从简单的本APP发给你的
首先，让我来说明一下2级菜单。
应用广泛，我们熟悉一些购物网站，在选择分类时可以使用2级、3级或以上，供我们选择，方便。
现在，让我们开始：
照片是从简单的本APP发给你的
风格
写我们应该表现的风格
body，ul {
margin: 0；
padding: 0；
}
.活动{
背景色： medium violet red；
color: #fff；
}
ul {
margin-top: 10px；
width: 200px；
}
ul li {
列表样式： none；
/* font-size: 10px； */
文本索引： 1cm；
/* margin-top: 20px； */
padding: 10px；
}
#nav {
width: 400px；
height: 404px；
border: 1px solid #333；
位置： absolute；
left: 200px；
top: 0；
}
#wrap {
position: relative；
width: 500px；
height: 600px；
}
很好
下面写着我们用鼠标滑动的方框，是菜单上的nav。 我们在上面滑动
框中的菜单溢出事件显示为li，navlist1list2list3list4list5list6list7list8list9list 10坂口小可爱js部分
获取//id
vara=function(id ) {
return document.getelementbyid (id；
}
获取//ul下的所有li
varwrapUli=a(Uli ) ).children；
//设置空对象
var flag；
控制台. log (wrap uli；
//遍历所有沥
for(varj=0； j wrapuli.length； j ) {
//写自我执行函数
(功能(k ) {
//li鼠标悬停li更改颜色，为元素指定新名称active，并设置颜色字体的颜色，以帮助您识别是否发生鼠标悬停
wrap uli [ j ].onmouseover=function (
wrapuli[k].className='active '；
//nav的风格表示滑动过li nav盒也会出现
a(nav ) ).style.display='block )；
//空对象等于形参k
flag=k；
}
//远离事件
wrap uli [ j ].on mouseout=function {
//没有触发器时沥没有风格
wrapuli[k].className=' '；
//nav框隐藏
a(nav ) ).style.display='none )；
}
() j )； //调用
}
//鼠标跟踪事件
a(nav ).onmouseover=function () () ) ) ) ) ) ) ) )。
//nav滑动显示
a(nav ) ).style.display='block )；
//li也出现触发效果
wrap uli [ flag ].class name=' active '；
}
//鼠标离开事件
a(nav ).onmouseout=function () () ) ) ) ) ) ) )。
//nav框隐藏
a(nav ) ).style.display='none )；
//同上
wrapuli[flag].className=' '；
}