Which CSS rules apply to my dropdown in the navigation bar? Resource inspectors seem unhelpful

I feel pretty silly at the moment, since I can't for the life of me figure out which CSS rules apply to a particular element in a particular state. The resource inspector of Chrome and Firefox seem unhelpful, or I've been using them all wrong.

The problem is a dropdown button in the navbar that needs to retain its purple background when its menu is hovered. The problem is demonstrated in this short clip.

I have also created a JSFiddle that demonstrates the problem.

The full HTML code and CSS code for reproducing the problem outside of JSFiddle can be found below. When running the code on StackOverflow you should expand the resulting view to full page, otherwise the navigation bar will not be visible.

.navbar,
.navbar .navbar-menu,
.navbar .navbar-menu .navbar-end .navbar-dropdown,
.navbar .navbar-menu .navbar-end .navbar-dropdown a,
.navbar .navbar-menu .navbar-end .has-dropdown .navbar-link:hover {
  background-color: #3C2148;
}

.navbar .navbar-menu .navbar-end .navbar-item a {
  color: white
}

.navbar .navbar-menu .navbar-end .has-dropdown .button {
  border: none;
}

.navbar .navbar-menu .navbar-end .has-dropdown a.navbar-link::after {
  border-color: #ffdd42;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>

<body class="has-navbar-fixed-top">
  <nav class="navbar is-fixed-top">
    <div id="navbarMenu" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">Language</a>
          <div class="navbar-dropdown is-right is-boxed">
            <a class="button is-fullwidth" type="submit">English</a>
            <a class="button is-fullwidth" type="submit">Dutch</a>
            <a class="button is-fullwidth" type="submit">French</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</body>

</html>

Solution

Your JSFiddle didn't work. The problem might be with this part of the code

.navbar .navbar-menu .navbar-end .has-dropdown .navbar-link:hover {
  background-color: #3C2148;
}

Try changing it to

.navbar .navbar-menu .navbar-end .has-dropdown .navbar-link{
  background-color: #3C2148;
}