🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注
不废话了 直接上代码:
HTML部分
<div id="menu">
<ul id="menu_sub">
<li class="first-list">
<a herf=''>菜单1</a>
<ul class="sub1">
<li class="second-list">
<a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li class="first-list">
<a herf=''>菜单2</a>
<ul class="sub1">
<li class="second-list"><a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li class="first-list">
<a herf=''>菜单3</a>
<ul class="sub1">
<li class="second-list"><a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li class="first-list">
<a herf=''>菜单4</a>
<ul class="sub1">
<li class="second-list"><a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
AI 代码解读
CSS部分
/*清除默认样式*/
ul,li {
padding: 0px;
margin: 0px;
list-style: none;
}
/*div样式*/
#menu {
border: 2px solid #ccc;
border-right: none;
float: left;
margin: 100px 0 0 300px;
}
/*浮动li*/
#menu ul li {
position: relative;
}
/*设置a标签的样式*/
#menu ul li a {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
display: block;
border-right: 2px solid #ccc;
background: #eee;
color: #666;
}
/*当鼠标移动到 一级菜单的a标签上时*/
#menu ul li a:hover {
cursor: pointer;
color: #f5576c;
border-right: 2px solid transparent;
}
/*二级菜单*/
#menu ul li .sub1{
position: absolute;
left: 120px;
top: -2px;
border-top: 2px solid #ccc;
background: #eee;
display: none;
/*z-index: 3;*/
}
/*设置二级菜单下的a标签样式*/
#menu ul li .sub1 li a{
border-top: 1px dotted #ccc;
width: 120px;
text-align: center;
height:39px;
color: #666;
}
#menu ul li .sub1 li a:hover{
color: #8fd3f4;
border-right: 2px solid #ccc;
}
/*设置二级菜单下的第一个li下的a标签样式*/
#menu ul li .sub1 li:first-child a{
}
/*设置二级菜单下的最后一个li下的a标签样式*/
#menu ul li .sub1 li:last-child{
border-bottom: 2px solid #ccc;
}
#menu ul li .sub1 li{
position: relative;
}
/*显示二级菜单 暂时注销*/
/* #menu ul li:hover .sub1{
display: block;
}*/
/*三级菜单*/
#menu ul li .sub1 li .sub2{
/*z-index:5;*/
position:absolute;
top: -2px;
left: 120px;
display: none;
border-top: 2px solid #ccc;
}
/*显示三级菜单 暂时注销*/
/*#menu ul li .sub1 li:hover .sub2{
display: block;
}*/
/*把右边框设置回来*/
#menu ul li .sub1 li .sub2 li a{
border-right: 2px solid #ccc;
height: 39px;
width: 120px;
}
/*文字颜色*/
#menu ul li .sub1 li .sub2 li a:hover{
color: #fee140;
}
AI 代码解读
javascript代码部分
window.onload=function(){
var oUl=document.getElementById('menu_sub');
var aLi=oUl.getElementsByClassName('first-list');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function () {
var sub2=aLi[this.index].getElementsByTagName('ul')[0];
sub2.style.display='block';
var aLisub2=sub2.getElementsByClassName('second-list');
for(var j=0;j<aLisub2.length;j++){
aLisub2[j].index=j;
aLisub2[j].onmouseover=function () {
var sub3=aLisub2[this.index].getElementsByTagName('ul')[0];
sub3.style.display='block';
}
}
}
aLi[i].onmouseout=function () {
var sub2=aLi[this.index].getElementsByTagName('ul')[0];
sub2.style.display='none';
var aLisub2=sub2.getElementsByClassName('second-list');
for(var j=0;j<aLisub2.length;j++){
aLisub2[j].index=j;
aLisub2[j].onmouseout=function () {
var sub3=aLisub2[this.index].getElementsByTagName('ul')[0];
sub3.style.display='none';
}
}
}
}
}
AI 代码解读
最后效果图 如下
