While using Google Chrome, I've encountered a peculiar hovering issue with a link inside a list. To demonstrate the problem, I have recreated it on this jsFiddle by copying the entire HTML and CSS from the website.
The trouble lies with the first element in the sidebar menu, which features the link "Maria Montessori." When hovering over the button, the hover effect seems to be interrupted or blocked in the middle where the text is located. You can try it yourself to better grasp what I am describing.
The relevant code snippet is as follows:
<ul class="page-menu">
<li class="page_item page-item-30"><a href="http://...">Maria Montessori</a></li>
<li class="page_item page-item-32"><a href="http://...">La pedagogia scientifica</a></li>
...
And here is the corresponding 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;
}
}
// remaining CSS styles continue below...
Upon inspecting it with developer tools, I couldn't find a solution, and oddly enough, the issue only seems to affect the first element. Strangely, everything functions correctly in Firefox.