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>
僅供參考，如果你發佈的jsfiddle與你的工作代碼或者編輯你的帖子以獲得一個嵌入式工作示例，你更可能爲你的問題得到一個可靠的答案。 –
@JamesKraus ok。 –