html - 基于 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 {...}

编辑 fiddle : http://jsfiddle.net/AnUZ7/4/

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

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