是否可以在菜單上懸停背景以覆蓋另一個菜單項？

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