title: Strange hover behaviour on link on Chrome
body: <p>I'm experiencing a strange hover behavior on a link inside a list in Chrome.
  I've managed to replicate the issue in this <a href="http://jsfiddle.net/vgh45tg8/" rel="nofollow">jsFiddle</a> copying the whole html and css from the website.</p>
  
  <p>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.</p>
  
  <p>The relative code is this:</p>
  
  <pre><code>&lt;ul class="page-menu"&gt;
      &lt;li class="page_item page-item-30"&gt;&lt;a href="http://..."&gt;Maria Montessori&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page_item page-item-32"&gt;&lt;a href="http://..."&gt;La pedagogia scientifica&lt;/a&gt;&lt;/li&gt;
  ...
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>.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;
          &amp;: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;
              &amp;: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 &gt; .children {display: none;} /*hides the submenu*/
      .page_item_has_children.current_page_item &gt; .children,
      .page_item_has_children.current_page_ancestor &gt; .children {display: block;} /*shows the submenu for the current page or when on its subpages */
  }
  </code></pre>
  
  <p>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.</p>