CSS多级别折叠菜单
问题描述：
我已经在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>
答
你可以重构你的HTML一下，让悬停状态，可以实现与而不是你的输入上的:checked。
首先，将.block>div上的伪元素替换为span元素，该元素位于label之后。我们需要的东西在input之后，所以我们可以用CSS来选择它，因为没有CSS父选择器。我们不能在输入中使用伪元素，所以我们只需添加一个跨度。
<div class="block">
<div>
<input type="checkbox" name="item" id="item-one" hidden />
<label for="item-one">First</label>
<span></span>
<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>
注意，我把小盒子，象征了你content财产从伪元素和突出部分把它放在span。
之后，这只是一个改变你的选择器的问题。因此，这...
.block > div:nth-child(1):before { ... }
.block > div:nth-child(1):hover:before { ... }
变为这个...
#item-one + label + span { ... }
.block>div:nth-child(1):hover #item-one + label + span,
#item-one:checked + label + span { ... }
这就是它！
你需要添加的span这是不存在的伪元素的显式高度，以及跨度设定为display: block。其余的样式完全相同。
最后需要说明的是，我将输入从type="radio"更改为type="checkbox"。这样，您可以将它们折叠起来，而不是一旦单击它就被迫一直打开。
这里就是第一个输入使用新的风格，第二个片段是一样的你原来的：
* {
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;
}
#item-one + label + span {
display: block;
font-family: 'FontAwesome';
content: "\F0CA";
font-size: 16px;
width: 50px;
height: 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 #item-one + label + span,
#item-one:checked + label + span {
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="checkbox" name="item" id="item-one" hidden />
<label for="item-one">First</label>
<span></span>
<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="checkbox" 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。 –