title: Nav Pills Background Leak
body: <p>I am looking to use navigation pills on my website, but they are resulting in a background leak. See the effect on this website: <a href="http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitableview-by-date/" rel="nofollow">http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitableview-by-date/</a>. Hover over the pills multiple times to see the issue. You can see the outline of the pills appear.
  <br>Here is the code that I tried:</p>
  
  <pre><code>    .navigation-main {
          border-top: 1px solid rgba(0,0,0,0.1);
          padding-top: 5px;
          clear: both;
          display: block;
          font: 700 13px/1.3076923076 Lato, sans-serif;
          letter-spacing: .05em;
          text-transform: uppercase;
          width: 100%;
      }
  
      .navigation-main .menu {
          max-width: 1272px;
          margin: 0 auto;
      }
  
      .navigation-main ul {
          list-style: none;
          margin: 0;
          padding-left: 0;
          text-align: center;
      }
  
      .navigation-main li {
          display: inline-block;
          position: relative;
          width: 100px;
      }
  
      .navigation-main li:after {
          content: none;
          display: block;
          font-size: 11px;
          margin-top: -4px;
          vertical-align: middle;
      }
  
      .navigation-main li:last-child:after {
          content: none;
      }
  
      .navigation-main a {
          display: block;
          line-height: 2.6153846153;
          padding: 0 10px;
          text-decoration: none;
          white-space: nowrap;
      }
  
      .navigation-main ul ul {
          background-color: #000;
          display: none;
          float: left;
          position: absolute;
          top: 2.6153846153em;
          left: 0;
          text-align: left;
          z-index: 99999;
      }
  
      .navigation-main li li {
          display: block;
      }
  
      .navigation-main li li:after {
          content: "";
          display: block;
          margin: 0;
      }
  
      .navigation-main ul ul ul {
          left: 100%;
          top: 0;
      }
  
      .navigation-main ul ul a {
          color: #fff;
          line-height: 1.3076923076;
          padding: .6153846153em 10px .6923076923em;
          white-space: normal;
          width: 170px;
      }
  
      .navigation-main ul ul a:hover {
          background-color: #333;
          color: #fff;
      }
  
      .navigation-main ul li:hover &gt; ul {
          display: block;
      }
  
  /* This is where the pill happens */
      .navigation-main a:hover,
      .navigation-main li.current_page_item &gt; a,
      .navigation-main li.current-menu-item &gt; a {
          border-radius: 4px;
          color: #FFFFFF;
          background-color: #000;
      }
  </code></pre>
  
  <p>How do I stop the outline from appearing? Thanks!</p>
  
  <p><strong>Edit:</strong>
  Code tried:</p>
  
  <pre><code>.navigation-main li {
      display: inline-block;
      position: relative;
      border-radius: 6px;
      width: 100px;
  
  
  .navigation-main a:hover,
  .navigation-main li.current_page_item &gt; a,
  .navigation-main li.current-menu-item &gt; a {
      border-radius: 4px;
      color: #FFFFFF;
      background-color: #000;
      background-clip: padding-box;
  }
  </code></pre>