Html 显示和隐藏孩子和父母的CSS

我有三个级别的列表。我只想让李的选项框显示出来。不是任何子项的选项，也不是任何父项的选项框。当前，当我走下树时，父对象保持悬停状态，这是有道理的，但不是我想要的。我该怎么做

HTML

你能试试“下一个同级”选择器吗

.options { display: none }

.options:hover,
label:hover + .options { display: inline-block }

通过一些伪元素技巧和巧妙的定位，您可以实现一个纯CSS解决方案：

---

太棒了。我从来不知道css中的+符号。这实际上就是我所需要的，并简化了您的解决方案，试图弄清楚它是如何工作的。Thanks@Boone-酷，如果有助于解决问题，想接受答案：）

ul.secondLevel {margin-left:15px;}
ul.thirdLevel {margin-left:15px;}

ul.firstLevel li .options{
    display: none;
}
ul.firstLevel li:first-child:hover > .options{
    display: inline-block;
}
ul.secondLevel li .options{
   display: none;
}
ul.secondLevel li:first-child:hover > .options{
    display: inline-block;
}
ul.thirdLevel li .options{
    display: none;
}
ul.thirdLevel li:first-child:hover > .options{
    display: inline-block;
}

.options {
    display: inline;
    font-size: 10px;
    font-weight: normal;
}

.options { display: none }

.options:hover,
label:hover + .options { display: inline-block }