It appears to only add padding when hovered over, resulting in a somewhat silly appearance.
I am aiming for full width when active is added, similar to the hover effect.
.nav li {
border-right: 1px dashed grey;
padding: 0 10px;
}
.nav > li:hover, .nav > li:active, .nav > li:focus {
background-color: #E7E7E7;
}
Unfortunately, I cannot comment on the answer on StackOverflow. So, here is my response:
Although the initial answer is correct, I prefer the li elements to have better spacing between them, hence the use of padding.