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

【问题标题】：css based a link hover activate/deactivate div基于 css 的链接悬停激活/停用 div
【发布时间】：2011-12-08 20:59:10
【问题描述】：

知道我在链接中遗漏了什么：** 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;
}

谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：