CSS::::::::::::::::
.category {
width: 200px; /*全体の横幅*/
border: 1px solid #333;
font-size: 12px;
}
.category label {
background: #333;
color: #fff;
padding: 12px;
display: block;
margin: 0;
cursor: pointer;
border-top: 1px solid #ccc;
}
.category label:first-child {
border-top: none;
}
.category input.switch{
display: none;
}
.category ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin: 0;
padding: 0;
list-style: none;
}
.category li {
border-top: 1px dashed #ddd;
padding: 12px 8px 12px 24px;
}
.category li:first-child {
border-top: none;
}
.category li:before {
content: "＞";
font-size: 9px;
font-weight: bold;
color: #ccc;
margin-right: 8px;
}
.category input.switch + ul{
height: 240px; /*クリックして出てくる高さ*/
overflow: hidden;
}
.category input.switch:not(:checked) + ul{
height: 0;
}
.category input.switch:checked + ul{
height: 240px; /*クリックして出てくる高さ*/
}
HMTL:::::::
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen,print" />
</head>
<body>
<div class="category">
<label for="category-1">カテゴリー1</label>
<input type="checkbox" id="category-1" class="switch" />
<ul>
<li><a href="">下カテゴリ</a></li>
<li><a href="">下カテゴリ</a></li>
</ul>
</div>
</body>
</html>
