* {
margin:0;
padding:0;
}
.content {
width:100%;
height:auto;
}
.nav {
width:200px;
height:auto;
margin-left:10%;
}
.nav-li {
width:200px;
height:auto;
font-size:16px;
background:black;
color:white;
line-height:40px;
text-align:center;
cursor:pointer;
}
.title {
width:200px;
height:40px;
border-bottom:1px solid #fff;
}
.nav:hover ul {
display:block;
/*当鼠标放到一级级栏目时，显示二级栏目*/
}
.nav ul {
width:200px;
height:auto;
display:none;
/*隐藏二级栏目*/
}
.nav ul li {
width:200px;
text-align:center;
list-style:none;
height:40px;
line-height:40px;
color:black;
background:#fff;
border:1px dashed #ececec;
position:relative;
}
.nav ul li:hover .list-3 {
display:block;
/*当鼠标放到二级栏目时，显示三级栏目*/
}
.list-3 {
width:200px;
height:auto;
position:absolute;
left:200px;
top:0;
display:none;
/*隐藏三级栏目*/
}
.list-demo {
width:200px;
height:40px;
text-align:center;
list-style:none;
color:black;
background:#fff;
border:1px solid #ececec;
}
更新时间：2020-04-16 09:39:09
利用css样式实现简单的菜单三级联动
css代码中有详细的介绍隐藏显示介绍！
想要的小伙伴赶紧下载吧！！！