css 实现二级折叠菜单效果,可以根据需要用jquery实现点击后才折叠菜单
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css实现二级折叠菜单</title>
<script src="./asserts/js/jquery-3.6.3.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.menu {
width: 200px;
}
.menu li {
list-style: none;
font-size: 14px;
}
.menu li a {
color: #555;
text-decoration: none;
font-weight: 600;
font-size: 16px;
width: 100%;
display: block;
}
.menu li a:hover {
color: green;
background-color: white;
/* 去掉下划线 */
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
.menu li ul li a {
color: #555;
/* 去掉下划线 */
text-decoration: none;
font-size: 14px;
}
.menu > li {
background-color: whitesmoke;
text-align: center;
}
.menu ul {
display: none;
}
.menu ul li {
text-indent: 60px;
}
/* 鼠标进入时 */
.menu > li:hover ul {
display: block;
}
@media screen {
.menu {
width: 200px;
height: 100vh;
}
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<ul class="menu">
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</body>
</html>