title: Hovering over menu item removes left border. How do I leave menu border on hover?
body: <p>I've got a menu made that utilizes left and right borders to separate each menu item. When hovering over the menu, the background changes to a lighter shade, which is what I want. However, hovering also covers the left border. How can I stop the border from disappearing? I'm sure this has been answered elsewhere, but I couldn't find it. Thanks, in advance.</p>
  
  <p><a href="http://jsfiddle.net/aYsKp/2/" rel="nofollow">http://jsfiddle.net/aYsKp/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div id="menu"&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="products.html"&gt;PRODUCTS&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="videos.html"&gt;VIDEOS&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="downloads.html"&gt;DOWNLOADS&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header {
      width:960px;
      margin: 10px auto 5px auto;
      background-color: #727272;
  }
  #menu {
      max-width:828px;
      bottom:0;
      right:0;
      font: 12px/18px sans-serif;
  }
  #menu a {
      text-decoration: none;
      display:block;
      padding: 10px 32px;
      color:#FFF;
  }
  #menu ul {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 15px 4px 17px 0;
      list-style: none;
  }
  #menu ul li {
      display: inline-block;
      margin-right: -4px;
      position: relative;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      border-right: 1px solid #FFF;
  }
  #menu ul li:first-child {
      border-left: 1px solid #FFF;
  }
  #menu ul li:hover {
      background-color:#818181;
  }
  </code></pre>