侧边栏隐藏菜单（练习）

最新推荐文章于 2020-11-29 16:53:12 发布

会做饭的技术男

最新推荐文章于 2020-11-29 16:53:12 发布

阅读量260

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21b1abahbib.html

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,ul,h3{
margin: 0;padding: 0;
}
.a ul{
display: none;
}
.a:target :nth-child(2){
display: block;
}
.a h3 a{
text-decoration: none;
}
</style>
</head>
<body>
<ul class="a" id="b">
<h3><a href="#b">menu1</a></h3>
<ul>
<li>mini1</li>
<li>mini2</li>
<li>mini3</li>
</ul>
</ul>
<ul class="a" id="c">
<h3><a href="#c">menu2</a></h3>
<ul>
<li>mini1</li>
<li>mini2</li>
<li>mini3</li>
</ul>
</ul>
<ul class="a" id="d">
<h3><a href="#d">menu3</a></h3>
<ul>
<li>mini1</li>
<li>mini2</li>
<li>mini3</li>
</ul>
</ul>
</body>
</html>