Li:hover not encompassing entire menu button on screen resize - html

Question

So I seem to be having an issue with the hover feature. When my screen is full size, I can hover my mouse over a menu option and the entire background color changes. However, when I resize my screen, only a portion of the background color changes. I see this upon screen resize:
Screen Resize Issue
Here is the HTML code
<nav>
<ul>
<li>Home</li>
<li>Getting Started</li>
<li>How Do Plants Thrive?</li>
<li>Common Problems</li>
<li>Great Indoor Plants</li>
<li>References</li>
</ul>
<nav>
And the css
nav {
width: 100%;
background: #003300;
border: 1px solid #ccc;
border-right: none;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
border-left: .5% solid #fff;
border-right: .5% solid #ccc;
width: 16.6667%; /* fallback for non-calc() browsers */
width: calc(100% / 6);
box-sizing: border-box;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
padding: 10px 0;
}
nav ul li a:hover {
background-color: #00b300;
width:100%;
}
.currentlink {
background: #00b300;
}
Thanks in advance for any help you can provide!

Answer 1

By testing your code it appears the issue is that your list items are assigning their height based on their content. As such, when you resize your window, forcing the text in one or more of your list items to wrap, the list items with the wrapped text grow taller than those with less or no wrapped text.
One possible solution, depending on how you wish to style your nav, is to utilize CSS' flex styling. For your CSS, try the following:
nav {
border: 1px solid #ccc;
border-right: none;
}
nav ul {
background: #003300;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: space-around;
list-style: none;
margin: 0;
padding: 0;
-webkit-flex-flow: row wrap;
}
nav ul li {
border-left: .5% solid #fff;
border-right: .5% solid #ccc;
box-sizing: border-box;
font-weight: bold;
padding: 5px;
text-align: center;
width: 16.6667%;
/* fallback for non-calc() browsers */
width: calc(100% / 6);
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background-color: #00b300;
}
nav ul li a {
color: white;
text-decoration: none;
}
.currentlink {
background: #00b300;
}
For your HTML, because we can't assign a height to the <a>, move class="currentLink" to the <a>'s parent <li> so it looks like the following:
<li class="currentlink">Home</li>
To see it all in action, check this jsfiddle.

Answer 2

It happens because your third a text wraps on two lines.
As #dmitry suggested, I'd go with flexbox too. Let's make a few modifications.
First thing, we need box-sizing: border-box on our elements and their children
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
Next we want the nav and the ul to be wull width and we apply display: flex; to this last one
nav {
width: 100%;
}
nav ul {
display: flex;
align-items: center;
width: 100%;
}
Last thing, we need our a to cover full height;
nav ul li a {
height: 100%;
}
Have a look on this fiddle.