Jquery 菜单是否可以在背景上悬停以覆盖另一个菜单项？

我有一个水平菜单，它是纯HTML、CSS和Jquery。所有的菜单都很完美，但是菜单的设计有一个非常愚蠢的分隔符，这给了我一个问题。无论如何，在悬停菜单上使用CSS是否可以覆盖其他菜单项之间的分隔符

这是菜单：

这是悬停状态：

这就是问题所在：

• 非常重要！菜单是动态的（我不能使每个菜单都具有给定的宽度）
• 分隔符h.line是一个*.png文件
• 所有菜单都是纯HTML、CSS和Jquery（问题只存在于CSS中），没有菜单图像背景，图像只是“分隔线”

CSS代码（我认为这部分才是问题所在）：

HTML:

---

唯一的问题是，当鼠标悬停时，它会将所有菜单从右向左移动1px，看起来很糟糕。。。有什么诀窍吗？

我在JSFIDLE中重新创建了这个问题

jsFiddle:

解决方案：

li:hover + li a {
    border-left: 0 none;
    margin-left: 1px;
}

在您的案例中添加此项

.white ul.mega-menu li:hover + li a {
    background-image: none;
}

---

一个选项是将悬停的项目向左移动一个像素以覆盖分隔符：

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

另一种选择是将分隔符放置在每个项目的左侧，然后在项目左侧悬停时用白色边框替换分隔符：

.white ul.mega-menu li
{
    background: url(../images/top_menu_separate.png) no-repeat left;
}

.white ul.mega-menu li:hover + li
{
    background: none;
    border-left: 1px solid #fff;
} 

---

你也可以展示一些html吗？是的，没问题！只要一秒钟，还有css吗？这似乎并没有重现问题。好吧，我添加所有菜单，谢谢你的回答。但这并没有帮助，它只在左侧添加了一个白色边框。。没有变化，让我解释一下：menu1 | menu2 |。当我将鼠标悬停在“menu2”上时，我只会更改menu2的背景，但MENU1有一个“|”分隔符，它没有改变。我刚刚更新：看看当边框是不同颜色时会发生什么！在我的情况下，这就是问题所在，我的分隔符是水平空间的1/2。相信我的客户是这样想的：（哇，这看起来好多了…让我把它插入我的代码中！：）希望这能起到作用。如果是，你是最好的！请你看看这个：我做错了什么？第一个解决方案是扭动，但我以前也尝试过，问题是当鼠标悬停mrnu时，菜单项移动了1px。这是不专业的。

border left

属性用于抵消

margin left

移动，并防止在悬停时菜单项和文本移动。如果您无法让它工作，我建议以不同的方式实现分隔符，以从一开始就避免这个问题。

.white ul.mega-menu li:hover + li a {
    background-image: none;
}

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

.white ul.mega-menu li
{
    background: url(../images/top_menu_separate.png) no-repeat left;
}

.white ul.mega-menu li:hover + li
{
    background: none;
    border-left: 1px solid #fff;
}