現在、起きている問題
CSSで装飾したところ、
下記画像の左は、アコーディオンメニューの ▼ が全て開けるのですが、
“ブラ＆ショーツセット▼” “レッグウェア▼” の二つは、バックカラーをグレーにしたいのでCSSを編集したところ、
下記画像の右は、アコーディオンメニューの“ブラ＆ショーツセット▼” “レッグウェア▼” のみ開けなくなりました。
どの様にコードを編集すれば、全てのアコーディオンメニューが開けるようになるでしょうか？
左の画像HTML（全ての▼が開く）
<!--アコーディオンメニュー部分 start-->
<nav class="accordion">
<!--2階層アコーディオン start-->
<label for="menu2">カテゴリから探す▼</label>
<input type="checkbox" id="menu2" class="toggle" />
<ul>
<label for="menu2_1">ブラ＆ショーツセット ▼</label>
<input type="checkbox" id="menu2_1" class="toggle" />
<ul>
<li><a href="#">全商品（ブラ＆ショーツセット）</a></li>
<li><a href="#">ブラ＆ショーツ</a></li>
<li><a href="#">ブラ＆ショーツ＆ガーターベルト</a></li>
</ul>
<li><a href="#">ベビードール・スリップ</a></li>
<li><a href="#">テディ</a></li>
<li><a href="#">ボディストッキング</a></li>
<li><a href="#">ガウン・ローブ</a></li>
<li><a href="#">セクシーコスチューム</a></li>
<li><a href="#">SMランジェリー</a></li>
<li><a href="#">ルームウェア</a></li>
<label for="menu2_2">レッグウェア ▼</label>
<input type="checkbox" id="menu2_2" class="toggle" />
<ul>
<li><a href="#">全商品（レッグウェア）</a></li>
<li><a href="#">ガーターストッキング</a></li>
<li><a href="#">ストッキング・タイツ・レギンス</a></li>
<li><a href="#">ショートストッキング</a></li>
</ul>
</ul>
<!--2階層アコーディオン end-->
<!--1階層アコーディオン start-->
<label for="menu1">カラーから探す ▼</label>
<input type="checkbox" id="menu1" class="toggle" />
<ul>
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
<!--1階層アコーディオン end-->
<!--1階層アコーディオン start-->
<label for="menu3">サイズから探す ▼</label>
<input type="checkbox" id="menu3" class="toggle" />
<ul>
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
<!--1階層アコーディオン end-->
</nav>
<!--アコーディオンメニュー部分 end-->
</body>
左の画像CSS（全ての▼が開く）
margin: 0;
padding: 0;
background: #f4f4f4;
list-style: none;
}
.accordion a {
display: block;
padding: 10px;
text-decoration: none;
color: #000000;
line-height: 1;
padding-left: 20px;
}
.accordion label{
display: block;
position: relative;
margin: 0 0 2px 0;
padding: 12px;
line-height: 1;
color: #ffffff;
background: #1b2538;
cursor: pointer;
}
.toggle{
display: none;
}
.toggle + ul{
max-height: 0;
overflow: hidden;
transition: all .5s ease;
}
.toggle:checked + ul{
max-height: 500px;
transition: all 2s ease-in;
}
<label for="menu2_1">ブラ＆ショーツセット ▼</label>
↓下記に変更
<span for="menu2_1">ブラ＆ショーツセット ▼</span>
<label for="menu2_2">レッグウェア ▼</label>
↓下記に変更
<span for="menu2_2">レッグウェア ▼</span>
span に変更しないと、“ブラ＆ショーツセット▼” “レッグウェア▼” の部分のバックカラーが黒くなってしまう為、変更した。
右の画像HTML（“ブラ＆ショーツセット▼” “レッグウェア▼” のみ開けない）
<body>
<!--アコーディオンメニュー部分 start-->
<nav class="accordion">
<!--2階層アコーディオン start-->
<label for="menu2">カテゴリから探す▼</label>
<input type="checkbox" id="menu2" class="toggle" />
<ul>
<span for="menu2_1">ブラ＆ショーツセット ▼</span>
<input type="checkbox" id="menu2_1" class="toggle" />
<ul>
<li><a href="#">全商品（ブラ＆ショーツセット）</a></li>
<li><a href="#">ブラ＆ショーツ</a></li>
<li><a href="#">ブラ＆ショーツ＆ガーターベルト</a></li>
</ul>
<li><a href="#">ベビードール・スリップ</a></li>
<li><a href="#">テディ</a></li>
<li><a href="#">ボディストッキング</a></li>
<li><a href="#">ガウン・ローブ</a></li>
<li><a href="#">セクシーコスチューム</a></li>
<li><a href="#">SMランジェリー</a></li>
<li><a href="#">ルームウェア</a></li>
<span for="menu2_2">レッグウェア ▼</span>
<input type="checkbox" id="menu2_2" class="toggle" />
<ul>
<li><a href="#">全商品（レッグウェア）</a></li>
<li><a href="#">ガーターストッキング</a></li>
<li><a href="#">ストッキング・タイツ・レギンス</a></li>
<li><a href="#">ショートストッキング</a></li>
</ul>
</ul>
<!--2階層アコーディオン end-->
<!--1階層アコーディオン start-->
<label for="menu1">カラーから探す ▼</label>
<input type="checkbox" id="menu1" class="toggle" />
<ul>
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
<!--1階層アコーディオン end-->
<!--1階層アコーディオン start-->
<label for="menu3">サイズから探す ▼</label>
<input type="checkbox" id="menu3" class="toggle" />
<ul>
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
<!--1階層アコーディオン end-->
</nav>
<!--アコーディオンメニュー部分 end-->
</body>
右の画像CSS（“ブラ＆ショーツセット▼” “レッグウェア▼” のみ開けない）
CSSは、上記の左の画像のCSSと同じ