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

Question

知道我在链接中遗漏了什么：** http://jsfiddle.net/AnUZ7/2/ **

我正试图像在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选择器选择.first之后的下一个元素 .first ~ .after-first选择器会选择.first之后的所有元素 这些选择器不能在Internet Explorer 6上运行，但希望这在2011年不是一个大问题。

请注意实际设计中a及其ul之间的（可能的）边距/填充/其他间隙！如果鼠标指针落在它们之间，菜单将消失。