好的，我有典型的菜单 (ul>li>a)。任务是将背景<div>（阴影、渐变等）绘制成<li>元素（ul>li>.shadow-bg-white）
（例如，div 是绿色边框。所有其他边框只是为了更好地了解问题）
http://jsfiddle.net/voilalal/P57yE/embedded/result/ 或 http://jsfiddle.net/voilalal/P57yE/6/ （例如，div 以绿色为边框）
如果我从左到右将鼠标悬停在项目上，一切正常。但是，如果我将鼠标悬停在从右到左的项目上，左侧的项目不会对 :hover 伪类做出反应。
每个块都分配了 CSS position 属性，所以 z-index 应该可以正常工作，我希望。
至少，.shadow-bg-white z-index 似乎比a 项更高。
您可以推荐什么解决方案？
【问题讨论】：
标签： css
我认为 Benjam 总体上是在正确的轨道上。我不知道您的最终目的，因此该解决方案可能不适用于您的情况，但没有其他解决方案。您悬停的li 必须设置得低于其他div，因此其中的div 不会与它们重叠。添加这个：
#header-menu ul li:hover {
z-index: 498; /* one lower than your set z-index for li */
}
请看这里：http://jsfiddle.net/P57yE/8/。
它向左移动的原因是，默认情况下，当项目处于相同 z-index 时，源顺序中后面的项目优先，因此当您向右移动时，您会在 html 源顺序中向下移动并且悬停在具有相同z-index 的新元素上被拾取。但是当您向左移动时，您将按照 html 源顺序向上移动，因此您悬停的那个优先，并且悬停仍然存在。
【讨论】：
它们没有反应，因为它们被 div 覆盖，因此 div 正在从其下方的任何地方窃取悬停。
如果 div 不需要覆盖所有 LI，您可能希望将其放置在具有 z-index 的 LI 下方。但我不确定您究竟想在这里做什么，所以我不确定该解决方案是否适合您。
【讨论】：