title: Is it possible for menu, on hover the background to overlay another menu item?
body: <p>I have a horizontal menu, It's pure HTML, CSS and Jquery. All the menu works perfect, but the design of the menu has a very stupid separator, which gives me problem. Anyway is it even possible with CSS on hover menu to cover the separator between other menu items?</p>
  
  <p>This is the menu : <img src="https://i.stack.imgur.com/GPMI3.jpg" alt="enter image description here"></p>
  
  <p>This is on hover : <img src="https://i.stack.imgur.com/EajmO.jpg" alt="enter image description here"></p>
  
  <p>This is the problem : <img src="https://i.stack.imgur.com/hVZMU.jpg" alt="enter image description here"></p>
  
  <ul>
  <li>Very important! menu is dynamic ( I can't make each one with a given width)</li>
  <li>the separator h.line is a *.png file</li>
  <li>all the menu is pure HTML, CSS, and Jquery (the problem is only in CSS), there is no menu image background, image is only the 'separator line'</li>
  </ul>
  
  <p>CSS code (i think only in this part is the problem):</p>
  
  <pre><code>    .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;
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;div class="white"&gt;  
                  &lt;ul id="mega-menu-9" class="mega-menu"&gt;
                      &lt;li&gt;&lt;a href="test.html" class="multi"&gt;Expertise&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="test.html"&gt;About us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Our People&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Our work&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Candidates&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Careers&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I think this is the method:</p>
  
  <pre><code>.white ul.mega-menu li:hover
  {
      border-left: 1px solid #dadcde;
      margin-left: -1px;
  }
  </code></pre>
  
  <p>The only problem is that, when hover it moves all the menu from the right to the left by 1px, and it look crap... is there a trick?</p>