0

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

我正在尝试创建一个下拉列表，当鼠标悬停在图标上时会显示该下拉列表。那行得通，但是当我尝试在下拉列表中选择一个选项时，它就会消失。当我将指针从“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 的情况下使我的图标可点击（打开下拉列表）？

先感谢您！

4

1 回答 1

0

您应该添加：

.settings_list_sub:hover{
     display:block;
}

到你的代码，它的工作原理:)

于 2013-06-11T00:24:09.390 回答