html - 将导航栏颜色更改应用于下拉菜单

Question

我正在尝试对导航栏中的以下链接的文本应用颜色更改:已访问、当前处于事件状态以及悬停在上方。它适用于我所有的常规超链接元素，但是因为我已经占用了我的下拉菜单按钮的“类”描述符(按钮类=“dropbtn”)，所以我不知道如何让它改变颜色用户在下拉菜单的页面上，或者如何在访问后改变颜色，因为你从来没有真正“访问”按钮，只有其中的链接。

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

.dropbtn:hover {
  color: #874c16;
  font-size: 20px;
}

.dropbtn:visited {
  color: #8b4e14;
}

.dropbtn.active {
  color: #ffe7d1;
}

.navbar a:hover {
  color: #874c16;
  font-size: 20px;
}

.navbar a:visited {
  color: #8b4e14;
}

.navbar a.active {
  color: #ffe7d1;
}

<div class="navbar">
  <a href="index.html">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Cuisine 
					  <i class="fa fa-caret-down"></i>
					</button>
    <div class="dropdown-content">
      <a href="indian.xml">Indian</a>
      <a href="italian.xml">Italian</a>
    </div>
  </div>
  <a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a>
  <a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a>
  <a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a>
  <a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a>
  <a href="datacollect.html">Customer Feedback</a>

</div>

尽管解决方案可能很简单，但我已经从事此工作很长时间了，非常感谢任何意见。谢谢大家(:

编辑:将按钮类更改为 anchor 类也不起作用，因为从未实际点击顶部的“美食” anchor ，只有其中的 anchor 元素被点击。

编辑 2:我的问题不清楚，我希望“美食”在用户位于从其中任何 anchor 链接的页面之一时改变颜色。因此，当他们点击“印度”或“意大利”时，我希望菜肴的颜色与他们在主页上的颜色不同。如果过去曾访问过“美食”，我还希望更改其默认颜色。

Answer 1

伪类 :visited :active 不适用于 button 元素，仅适用于 a 元素. 因此，最好重写按钮代码并将其转换为 anchor a 元素。

$('.dropdown a').click(function () {
  $('.dropdown').css('background', 'red');
});

.dropdown:hover .dropdown-content {


display: block;

}
.dropbtn {
  display:block;
  height: 30px;
  line-height:30px;
  width: 100px;
  text-align: center;
  background:#ccc;
  border-radius:5px;
  border: 1px solid #bbb;
  text-decoration: none
}
.dropbtn:hover{
    color:#874c16;
    font-size:20px;

}

.dropbtn:visited{
    color:#8b4e14;
}


.dropbtn.active{
    color:#ffe7d1;
}


.navbar a:hover{
    color:#874c16;
    font-size:20px;

}
.navbar a:visited{
    color:#8b4e14;
}


.navbar a.active{
    color:#ffe7d1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
            <a href="index.html"  >Home</a>
            <div class="dropdown">
                <a class="dropbtn" href="#">Cuisine 
                  <i class="fa fa-caret-down"></i>
                </a>
                <div class="dropdown-content">
                  <a href="indian.xml">Indian</a>
                  <a href="italian.xml">Italian</a>
                </div>
            </div>
            <a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a>
            <a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a>
            <a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a>
            <a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a>
            <a href="datacollect.html">Customer Feedback</a>

        </div>