Question

所以我遇到的问题是我创建了导航栏并实现了渐变配色方案。一切都很好。

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

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

下面是 navbar 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>

和 navbar 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类中设置了颜色，否则这些默认为下拉菜单的浅灰色。

我正在寻找的结果类似于Adding Participants上的导航栏，其中的按钮似乎采用了渐变色方案，直到将鼠标悬停为止。

Answer 1

我相信以下摘要可以按预期工作吗？但是我什么都没改变。我相信您其他CSS中的某些内容可能与此CSS冲突。

尝试在颜色之后添加!important。通过这种方式，您告诉浏览器首先使用它。

More reading on !important can be found here.

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

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

Answer 2

如果我没记错的话，您想在按钮中看到连续的渐变颜色作为导航栏的背景，而不是在其中放置扩展区域。

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

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

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

2 个答案: