哪些 CSS 规则适用于我在导航栏中的下拉菜单？资源检查员似乎没有帮助

Question

我现在觉得很傻，因为我一辈子都弄不明白哪些 CSS 规则适用于特定状态下的特定元素。 Chrome 和 Firefox 的资源检查器似乎没有用，或者我一直用错了。

问题是导航栏中的下拉按钮需要在其菜单悬停时保留其紫色背景。 this 短片中演示了该问题。

我还创建了一个 JSFiddle 来演示问题。

完整的 HTML 代码和 CSS 用于在 JSFiddle 之外重现问题的代码可以在下面找到。当运行 Whosebug 上的代码时，您应该将生成的视图展开为整页，否则导航栏将不可见。

.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>

Answer 1

你的 JSFiddle 不工作。问题可能出在这部分代码

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

尝试将其更改为

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

哪些 CSS 规则适用于我在导航栏中的下拉菜单？资源检查员似乎没有帮助

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

html

css

bulma