1

我遇到了一个问题...在 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]

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

4

2 回答 2

0

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

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

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

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

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

~

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

于 2016-07-26T00:22:13.490 回答
0

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

添加到 CSS：

.nav ul li > a.wsite-menu-item:active,, .nav ul li > a.wsite-menu-item:focus {
  background: orange;
}
于 2016-07-24T15:19:14.613 回答