Question

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

我正在尝试创建一个下拉列表，当鼠标悬停在图标上时会显示该列表。这是有效的，但是当我尝试在下拉列表中选择一个选项时，它就会消失。当我将指针从“icon div”移动到“list div”时，我无法弄清楚如何使它停留。我发现很多人遇到的一个问题是“list div”与“icon 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的情况下使我的图标可点击（打开下拉列表）？

提前谢谢！

Answer 1

你应该添加：

.settings_list_sub:hover{
     display:block;
}

到你的代码，它的工作原理：）

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

1 个答案: