CSS navigation bar hover issue - html

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">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</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">Home</li
><li>Item1</li
><li>Item2</li
><li>Item3</li
><li class="last">Item4</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?

Answer 3

You can also set hover without "a"
ul.naviTop li:hover. {...}
It also looks better.

Answer 4

The problem is you have padding: 14px 16px; on .navTopRight li a, which is set to display: inline;. You can't give vertical margin/padding/etc to an inline element and have it affect the elements before/after it. So when you hover over those links, and the background color is applied, it looks really weird because the vertical padding becomes visible. Assuming that the navigation menu looks like you want it when the links aren't hovered, just remove that vertical (top/bottom 14px) padding from the links.
.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: 0 16px;
text-decoration: none;
}
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;
}
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>