Strange hover behaviour on link on Chrome - css

Question

I'm experiencing a strange hover behavior on a link inside a list in Chrome.
I've managed to replicate the issue in this jsFiddle copying the whole html and css from the website.
The problem is on the first element of the side menu, which is the link with "Maria Montessori" in it. What happens is that the hover area is like interrupted in the middle, where the text is. It's like there is something covering the middle part of the button. Try it yourself to understand what I mean.
The relative code is this:
<ul class="page-menu">
<li class="page_item page-item-30">Maria Montessori</li>
<li class="page_item page-item-32">La pedagogia scientifica</li>
...
And the css:
.page-menu {
display: inline-block;
margin-right: 25px;
text-align: center;
width: 210px;
li {
margin-bottom: 10px;
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
li.current_page_parent {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
a {
background-color: $grey-light;
border-bottom: 2px solid $grey-light;
color: $grey-dark;
display: block;
font-family: Lato;
font-weight: 300;
line-height: 1.2;
padding: 15px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
ul.children {
margin-top: 10px;
li {
margin-bottom: 10px;
margin-left: 10px;
}
li a {
background-color: #f9f9f9;
border-bottom: 2px solid #f9f9f9;
color: $grey-dark;
display: block;
font-family: Lato;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
}
.page_item_has_children > .children {display: none;} /*hides the submenu*/
.page_item_has_children.current_page_item > .children,
.page_item_has_children.current_page_ancestor > .children {display: block;} /*shows the submenu for the current page or when on its subpages */
}
Inspecting it with developer tools didn't really help and what's strange is that the issue appears to be only on the first element. And in Firefox works fine, anyway.

Answer 1

Your div menu-menu-1-container is overlapping to your first menu because of line height property of your div .nav-menu use padding instead
.nav-menu {
padding: 17px; /* remove line-height property */
}
Updated working Code