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

Question

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

这是菜单：

这是悬停：

这是问题所在：

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

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

    .white ul.mega-menu li {
    float: left; 
    margin: 0; 
    padding: 0;
    text-transform: uppercase;
}
.white ul.mega-menu li a {
    float: left; 
    display: block; 
    color: #47515c; 
    padding: 0px 15px; 
    text-decoration: none;
    border-left: 1px solid #fff;
    background: url(../images/top_menu_separate.png) no-repeat right; 


}
.white ul.mega-menu li a.dc-mega {position: relative;}
.white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {
    color: #47515c;
    background: #dadcde;
    border-left: 1px solid #dadcde;
    padding-bottom: 0px;
    z-index: 5000000;
    overflow: visible;

}

HTML：

            <div class="white">  
                <ul id="mega-menu-9" class="mega-menu">
                    <li><a href="test.html" class="multi">Expertise</a></li>
                    <li><a href="test.html">About us</a></li>
                    <li><a href="#">Our People</a></li>
                    <li><a href="#">Our work</a></li>
                    <li><a href="#">Candidates</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>

我认为这是方法：

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

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

Answer 1

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

jsFiddle：http://jsfiddle.net/gkgUj/

解决方案：

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

在您的情况下

添加此

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

Answer 2

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

.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;
}