Html 带有活动链接的简单水平菜单

我无法将活动选项卡颜色添加到菜单代码中，任何人都可以在这方面帮助我。我从以下教程中收集了css水平代码：

除了悬停颜色外，我还希望活动页面使用另一种颜色。请帮帮我

#menu a{
   display: block; padding: 5px 10px; 
   width: 100px; border-right: 2px solid #ffffff; 
   text-decoration: none;  border-left: 10px solid #1958b7;  
   color: #fff; background: #2175bc;
   }
#menu a:hover{
   color: pink; background: #2586d7;   
   border-left: 10px solid #1c64d1; 
   }

---

如何为链接创建活动类（只需将该类添加到：hover CSS）：

现在您有了如下链接：

---

这就是问题所在吗？

您可以使用javascript/JQuery，（）：

还有更多CSS：

#menu a.selected{
   background: red; 
   }

---

这是我过去常做的事：

<li class="active"><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contact.html">CONTACT</a></li>

---

在css中创建一个类。然后使用jquery addClass更改活动类的颜色

#menu a.selected{
   background: red; 
   }

<li class="active"><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contact.html">CONTACT</a></li>

.active{
  //Your code goes here
}