title: CSS navigation bar hover issue
body: <p>I am working on a website which has a centered horizontal navigation bar. This bar has to have round corners on the end parts along with a hover effect. All of this is sort of working, but the issue is that the hover of the nav bar is overflowing the actual size of the bar. Along with that there is a slight white space between every element. As you can see in the following <a href="https://jsfiddle.net/25u473e1/2/" rel="nofollow noreferrer">jsfiddle</a> it doesn't look quite right. Another important note, is the fact that the navigation bar has to work with Bootstrap and the responsive functions. Which means nothing can be positioned absolute or float etc. Underneath I have also attached the html and css code. </p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="navTopRight"&gt;
   &lt;ul class="naviTop"&gt;
   &lt;li class="first"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#scrollToBot"&gt;Item1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="Item2.html"&gt;Item2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="Item3.html"&gt;Item3&lt;/a&gt;&lt;/li&gt;
   &lt;li class="last"&gt;&lt;a href="Item4.html"&gt;Item4&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.navTopRight{
      text-align:center;
      list-style-type: none;
      margin-top: 30px;
      padding: 0;
  }
  
  ul.naviTop li {
     border:1px solid black;
     display: inline;
     overflow:hidden;
     background-color:#003340;
  }
  
  .navTopRight li:last-child {
      border-right: none;
  }
  
  .navTopRight li a{
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      display: inline;
  } 
  
  ul.naviTop li a:hover {
      background-color:#0099bf;
  }
  
  li.first{
      border-top-left-radius:5px;
      border-bottom-left-radius:5px;
  }
  li.last{
      border-top-right-radius:5px;
      border-bottom-right-radius:5px;
  }
  </code></pre>