Html CSS下拉列表在悬停时不会保持打开状态

我在网上搜索了我的问题的答案，但找不到任何好的解决办法

我试图创建一个下拉列表，当鼠标悬停在图标上时显示。这是可行的，但当我尝试在下拉列表中选择一个选项时，它就消失了。当我将指针从“icon div”移动到“list div”时，我不知道如何使其保持不变。我发现很多人遇到的一个问题是“列表分区”与“图标分区”或菜单的距离不够近。我通过设置不同的背景来验证这一点，从我可以看出，它们甚至是重叠的

我会给你代码：

.settings_list {
    height: 25px;
    width: 39px;
    position: fixed; top: 26px; right: 7px;
    float: right;
    display: block;
    background: transparent url('resources/img/icons/list.png') center top no-repeat;
}

.settings_list:hover {
    background-image: url('resources/img/icons/list_light.png');
}

.settings_list_sub {
    display: none;
    position: relative;
    padding: 10px;
    left: 40px;
    width: 150px;
    background-color: green;
    color: #999;
    opacity: 0.70;
}

.settings_list:hover + .settings_list_sub {
    display: block; 
}

.settings_list_sub li {
    list-style: none;
    margin-top: -5px;
    background-color: yellow;
}

.settings_list_sub li a {
    text-decoration: none;
    display: block;
    color: #999;
    width: 135px;
    padding: 5px 5px 5px 10px;
    background-color: blue;
}

.settings_list_sub li a:hover {
    text-decoration: none;
    color: #FCFCFC;
    background-color: #06C;
}

以及HTML：

<div class="settings_list"></div>
<div class="settings_list_sub">
    <li><a href="">Test01</a></li>
    <li><a href="">Option 2</a></li>
    <li><a href="">Option 3</a></li>
    <li><a href="">Log out</a></li>
</div>

也许我完全错了。如果你能帮助我，我将非常感激

实际上我还有一个问题。有没有可能不使用JS就可以点击我的图标（打开下拉列表）

提前谢谢你

您应该添加：

.settings_list_sub:hover{
     display:block;
}

---

对于您的代码，它是有效的：）

首先，您的HTML是无效的

li

标签必须是刚刚注意到的

ul

或

ol

标签的子项。完成！谢谢，太好了！我只是这样做了，并调整了“设置列表”-div.@user2212773，我几乎投了反对票，但我还是解释了为什么我要这么做，HTML是无效的，无论应用cascasde，它都应该被修复。干杯