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

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