1
私はHTMLとCSSでいくつかのコードを書いています。出力がスクリーンショットに表示されます。 メニュー項目が選択されている（展開されている）とき、上記のメニューが選択されている間（マウスが項目をホバリングしていない）、メニューの右側のカラーセクションは消えます。 マウスをメニューの上に置いていなくてもカラーを維持する方法は？CSSマルチレベルアコーディオンメニュー
（任意のJavaスクリプトコードを示唆していないしてください。）
CSS Multi-Level Accordion Menu
* {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
.block {
float: right;
max-width: 360px;
width: 100%;
height: 100%;
background-color: white;
overflow: hidden;
margin: 0;
}
.block > div {
display: block;
position: relative;
background-color: #fff;
color: #767676;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
.block > div:nth-child(1):before {
font-family: 'FontAwesome';
content: "\F0CA";
font-size: 16px;
width: 50px;
font-weight: bold;
text-align: center;
position: absolute;
right: 0;
top: 0;
line-height: 50px;
margin: 0;
color: #767676;
border-right: 4px solid #E94B3B;
background: none; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* For Opera 11.6-12.0 */
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* For Firefox 3.6-15 */
background: linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* Standard syntax */
background-size: 200% 100%;
transition: all 0.25s ease-in-out;
}
.block > div:nth-child(1):hover:before {
background-position: 100% 0;
color: white;
}
.block > div:nth-child(2):before {
font-family: 'FontAwesome';
content: "\F0F6";
font-size: 16px;
width: 50px;
font-weight: bold;
text-align: center;
position: absolute;
right: 0;
top: 0;
line-height: 50px;
margin: 0;
color: #767676;
border-right: 4px solid #ffb61c;
background: none; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* For Opera 11.6-12.0 */
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* For Firefox 3.6-15 */
background: linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* Standard syntax */
background-size: 200% 100%;
transition: all 0.25s ease-in-out;
}
.block > div:nth-child(2):hover:before {
background-position: 100% 0;
color: white;
}
.block > div > input + label {
cursor: pointer;
display: block;
line-height: 50px;
background-color: white;
transition: background-color 0.5s;
color: #767676;
padding-right: 60px;
text-align: right;
}
.block > div > input ~ div {
visibility: hidden;
max-height: 0;
padding: 0;
opacity: 0;
transition: all 0.5s;
}
.block > div > input:checked + label {
background-color: #f3f3f3;
transition: background-color 0.5s;
color: black;
}
.block > div > input:checked ~ div {
display: block;
opacity: 1;
visibility: visible;
height: auto;
max-height: 10000px;
padding: 0;
transition: all 0.5s;
}
.block a {
display: block;
line-height: 50px;
text-decoration: none;
color: black;
border-top: solid 1px #e5e5e5;
padding-right: 50px;
text-align: right;
}
.block a:hover {
background: #eeeeee;
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/FontAwesome.otf') format('opentype');
}<div class="block">
<div>
<input type="radio" name="item" id="item-one" hidden />
<label for="item-one">First</label>
<div>
<p><a href="#">Menu 1.1</a></p>
<p><a href="#">Menu 1.2</a></p>
<p><a href="#">Menu 1.3</a></p>
</div>
</div>
<div>
<input type="radio" name="item" id="item-two" hidden />
<label for="item-two">second</label>
<div>
<p><a href="#">Menu 2.1</a></p>
<p><a href="#">Menu 2.2</a></p>
<p><a href="#">Menu 2.3</a></p>
</div>
</div>
</div>
：
は、ここで最初の入力が新しいスタイルを使用して2つ目は、あなたのオリジナルと同じであるスニペットです、またはあなたの投稿を編集して、あなたの質問に対する確かな答えを得る可能性が高くなります。 –
@JamesKraus ok。 –