Question

我遇到了一个问题......在CSS中没有exp，所以我只想弄清楚但是我不能......

在我正在Weebly上制作的网站中，我希望子菜单具有“活动”背景，我知道该怎么做，但它不起作用，我不知道为什么不这样做？我也希望它上面的菜单保持活动状态（但仍可点击），即使其下的子菜单处于活动状态。

https://postimg.org/image/6s8phmliv/这是我的意思的图像，当我悬停它时，我得到了我想要的颜色。当它不活动时，我需要背景颜色（＃657a8f）和字体颜色（＃97da6f），当它不悬停在它上面时，它不需要恢复正常（颜色：＃b9b9b9;背景：＃657a8f;）。同样，我无法弄清楚如何保持'Showreel'也会突出显示为活动状态（它具有与悬停子菜单相同的活动颜色。

这是我的代码：

/* Nav */
.nav {
   text-align: center;
   background: #4c5a67;

}
.nav ul {
  display: inline-block;
  vertical-align: top;
  list-style-type: none;

}
.nav ul li {
  position: relative;
  display: inline-block;
}
.nav ul li a {
  display: block;
  padding: 1em;
  color: #b9b9b9;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 19px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
}
.nav ul li#active > a.wsite-menu-item,
.nav ul li > a.wsite-menu-item:hover {
  color: #97da6f;
  background: #657a8f;
}
.mobile-nav {
  display: none;
}
/* Submenu */
#wsite-menus .wsite-menu {
  border-top: 1px solid #b9b9b9;
  width: 170px;
}
#wsite-menus .wsite-menu li a {
  color: #b9b9b9;
  background: #657a8f;
  border: none;
  text-transform: Capitalize;
  letter-spacing: .07em;
}
#wsite-menus .wsite-menu li:last-child a {
  background: #4c5a67;
  border-bottom: none;
  width: 160px;
  border-top: 1px solid #b9b9b9;
  border-bottom: 1px solid #b9b9b9;
  font-size: 17px;
}
#wsite-menus .wsite-menu li:first-child a {
  background: #4c5a67;
  border-bottom: none;
  width: 160px;
  font-size: 17px;
}
.nav ul li#active > a.wsite-menu-item{
  color: #97da6f;
  background: #657a8f;
}
.nav ul li > a.wsite-menu-item:hover,
#wsite-menus .wsite-menu li a:hover {
  background: #657a8f;
  color: #97da72;
}
#wsite-menus .wsite-menu li a:hover .wsite-menu-arrow:before {
  background: #657a8f;
  color: #97da72;
}
#wsite-menus .wsite-menu-arrow {
  background: #657a8f;
  color: #97da72;
  font-size: 0;
}
#wsite-menus .wsite-menu-arrow:before {
  background: #657a8f;
  display: block;
  color: #97da72;
  content: '\203A';
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 11px;
}[enter image description here][1]

非常感谢你的帮助！我真的不太了解，我只是把东西放在不同的代码下，看看它是否更新了正确的东西，所以我不知道..可能也弄得一团糟？

Answer 1

这是一个纯粹的猜测，因为没有完整的代码就很难测试：

添加到CSS：

.nav ul li > a.wsite-menu-item:active,, .nav ul li > a.wsite-menu-item:focus {
  background: orange;
}

Answer 2

对于主导航菜单，您可以使用（文本）：

.nav ul li#active a {
    color: #97da6f;
}

对于主导航的背景，您可以使用：

.nav ul li#active {
    background: #657a8f;
}

这是因为Weebly将id =“active”添加到主导航。

〜

下拉菜单（sub-nav），另一方面，Weebly不会这样做。因此，您需要在社区页面中将其作为功能请求提交给他们。

如何在我的weebly（css）代码中更改活动子菜单的背景

2 个答案: