导航当前选定的项目忽略背景颜色。 （wayfinder，ModX）

Question

标题几乎描述了我的问题。我的页面顶部有一个导航菜单，其中包含多个下拉部分。现在所有的bg颜色都被完美识别，唯一的问题是你当前所在的菜单（比如'Weblog'）然后它忽略了指定的背景颜色，它只是给它默认的背景。我在ModX中使用Wayfinder片段，它基本上占用了所有指定的页面并将它们放在菜单中。我注意到下面的css，因为探路者的召唤不会有多大用处。我愿意接受各种建议和改进。 干杯，

#nav {
/*   float: right; */
  font-style:uppercase;
  margin-left:100px;
  margin-right: 62px;
  margin-top: 36px;
  z-index: 2;
}               
#nav a{
  padding: 0 10px;
  letter-spacing: 1px;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}


#nav ul li.active a {
  background: #3f3a2b;
}
#nav ul li:hover{
  background-color:#3f3a2b;
}

#nav ul li {
  position: relative;
}

#nav ul li a {
  font-size: 13px;
  padding: 4px 8px;
  display: inline-block;
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 28px;
  color: #fff;
}


#nav ul li ul{
  border: 1px solid #2a2a2a;
}
#nav ul li ul li{

}
#nav ul li ul li:hover{
  background-color:#3f3a2b;
}
#nav ul li ul li a{
  color:black;
  font-size:11px;
  line-height:15px;
  border:none !important;
  width:170px;
  background: #FFF;
}
#nav ul li ul li a:hover{
  background-color:#3f3a2b;
}

#nav ul ul,
#nav ul ul ul {
  display: none;
  z-index: 2;
}

#nav ul li:hover > ul {
  display: block;
  position: absolute;
  top: 35px;
  left: 0;
}

#nav ul li:hover > ul li {
  float: none;
  background: #FFF;
  position: relative;
}

#nav ul li:hover > ul li:hover ul {
  display: block;
  position: absolute;
  top: 0;
  left: 186px;
}
#nav ul li ul li a:hover{
  background-color:#3f3a2b;
  color:white;
}
#nav ul li:hover ul li:hover ul {
  display: block;
}

#nav ul li ul li ul li a{
/*   line-height:25px !important; */
}

---

修改

---

以下是一些解释我的问题的截图：

^这是所有项目的样子。^

^如果您当前在其中一个页面中，这就是菜单的样子^

Answer 1

博客是li.active，此规则改变了他的颜色：

#nav ul li.active a {
   background: #3f3a2b;
}

Answer 2

#nav ul li.active  li a {
   background: white;
}
#nav ul li:hover{
  background-color:#3f3a2b !important;
}

这解决了我的问题，谢谢大家和我一起思考。