CSS navigation bar hover issue

Question

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 jsfiddle 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.

HTML

<div class="navTopRight">
 <ul class="naviTop">
 <li class="first"><a href="index.html">Home</a></li>
 <li><a href="#scrollToBot">Item1</a></li>
 <li><a href="Item2.html">Item2</a></li>
 <li><a href="Item3.html">Item3</a></li>
 <li class="last"><a href="Item4.html">Item4</a></li>
 </ul>
 </div>

CSS

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

Answer 1

So i think you basicly had everything right here there is just some small details.. if I understood your question correctly you wanted to just fill your li background without the blue color overflowing everything.. This is easiest done by changing the padding:14px 16px; to padding:0px 16px;

after that you wanted the empty white space removed and that can be achieved pretty simple by changing your html codes structure like this:

                <li class="first"><a href="index.html">Home</a></li
                ><li><a href="#scrollToBot">Item1</a></li
                ><li><a href="Item2.html">Item2</a></li
                ><li><a href="Item3.html">Item3</a></li
                ><li class="last"><a href="Item4.html">Item4</a></li>

Notice how all the li tags ends just before the new one starts. Here is a working fiddle aswell! So no use of position or float needed!

https://jsfiddle.net/nfztdxr2/3/

Answer 2

If you want to fix overflow hover just change this part of your css

ul.naviTop li {
   border:1px solid black;
   display: inline; -> *display: inline-block;*
   overflow:hidden;
   background-color:#003340;
}

here is the result https://jsfiddle.net/nfztdxr2/

Let me know if that is what you try to achieve, or maybe there is another concern?