侧边栏隐藏菜单(练习)

<!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>

posted @ 2017-04-19 22:29  非凡。  阅读(522)  评论(0编辑  收藏  举报