Onhover not working on some meganav dropdown items [tablet/mobile view]

[petesfrench]

Summary

The onhover effect not working on some meganav items. Specifically links with the class p-navigation__dropdown-item.

Potential fixes:

1. Update the pattern to match that of Vanilla (this might have unexpected effects on functionality)

<li class="">
  <a href="/desktop" class="p-navigation__dropdown-item 
      p-link--inverted" onclick="event.stopPropagation()" tabindex="0">
    <span>Ubuntu Desktop</span>
    <br>
    <small class="is-muted">Fast, modern and secure Linux</small>
  </a>
</li>

2. Apply the onhover effect here

Steps to reproduce the behavior

1. Go to https://ubuntu.com/ on tablet or mobile screen size
2. Open the meganav by clicking the 'menu'
3. Navigation to the bottom layer of any navigation item. ex. 'Products' > 'Featured'.
4. Hover your mouse over the dropdown items
5. See that no onhover effect is applied

Expected behavior

Onhover the background changes to #313131.

Current: Expected:

You can see this in action in this vanilla example

Browser/device details

Ubuntu, Chrome

Reported from

GitHub