html - CSS 问题 - 导航栏渐变和按钮颜色问题

Question

所以我遇到的问题是我已经创建了导航栏并实现了渐变配色方案。一切顺利。

然后我在菜单中添加了几个下拉按钮，这些按钮可以按需要运行，但是我不知道如何在这些按钮上保留原始的导航栏配色方案。

我尝试添加代码再次，但显然这会在按钮内创建一个新的渐变。如果我删除颜色，那么它会切换为与下拉背景相同的颜色。

这是导航栏 html 的片段:

<div class="dropdown">
  <button class="dropbutton">Gaming</button>
    <div class="dropdown-content">
      <a href="pc.html">PC</a>
      <a href="xbox.html">Xbox</a>
      <a href="playstation.html">PlayStation</a>
      <a href="nintendo.html">Nintendo</a>
    </div>
  </div>

还有导航栏 CSS:

.navbar {
display: flex;
background-image: linear-gradient(to bottom right, #581CBE, #F00E96);}

.navbar a {
color: #FFFFFF;
padding: 16px 20px;
text-decoration: none;
text-align: center;}

.navbar a:hover: {
background-color: #EA14EA;
color: black;}

最后，下拉 CSS:

.dropdown-content {
display: none;
position: absolute;
background-color: #FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbutton {background-color: #ddd;}

编辑: 为了进一步说明，正确的 html 出现在代码片段之前，调用类等。我遇到的问题是我无法让下拉按钮看起来与导航栏的其余部分，即由 .navbar 设置的渐变也延伸到两个按钮上。
我已经在 .dropbutton 类中设置了颜色，否则这些颜色默认为下拉菜单的浅灰色。

我正在寻找的结果类似于 polygon 上的导航栏。按钮旁边的位置似乎采用渐变配色方案，直到悬停。

Answer 1

如果我没有弄错的话，您希望在按钮中看到继续渐变颜色作为导航栏的背景，而不是在下拉扩展区域中。

如果是则尝试添加以下代码

.dropbutton{
        color: white !Important;
        background-color: rgba(0,0,0,0) !Important;
    }