我现在觉得很傻，因为我一辈子都无法弄清楚哪些CSS规则适用于处于特定状态的特定元素。Chrome和Firefox的资源检查器似乎没有帮助，或者我一直在错误地使用它们。
问题是导航栏中的一个下拉按钮在菜单悬停时需要保留紫色背景。这个短片展示了这个问题。
我还创建了一个JSFiddle来演示这个问题。
在JSFiddle之外复制问题的完整HTML代码和CSS代码可以在下面找到。在StackOverflow上运行代码时，您应该将结果视图扩展到整个页面，否则导航栏将不可见。
.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>您的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;
}