基于CSS的链接悬停激活/停用div

Question

知道我在链接中缺少什么吗：** http://jsfiddle.net/AnUZ7/2/< /a> **

我正在尝试像 Zerply

<a href="#" class="setting">Setting</a>

<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
</ul>

css 那样创建一个下拉菜单：

ul {
    position: absolute;
    background: orange;
    width: 10em;
    left: -999em; 
}

a.setting:hover ul {
    left: auto;
}

谢谢！

Answer 1

尝试将 a.setting:hover ul {...} 替换为

a.setting:hover + ul,
ul.submenu:hover {...}

编辑的小提琴：
http://jsfiddle.net/AnUZ7/4/

.first + .second< /code> 选择器选择 .first 之后的下一个元素。
.first ~ .after-first 选择器选择 .first 之后的所有元素。
这些选择器不适用于 Internet Explorer 6，但希望这在 2011 年不是一个大问题。

请注意 a 与其 ul 在您的实际设计中！如果鼠标指针落在它们之间，菜单就会消失。