Как изменить фон активного подменю в моем коде weebly (css)

Question

У меня проблема... у меня нет опыта в CSS, так что я просто пытаюсь понять это, но не могу...

На сайте, который я создаю на Weebly, я хочу, чтобы подменю имели "активный" фон, который я знаю, как делать, но он не работает, и я не знаю, почему это не так? Я также хочу, чтобы меню над ним тоже оставалось активным (но все еще активным), даже если подменю под ним активно.

https://postimg.org/image/6s8phmliv/ вот изображение того, что я имею в виду, когда при наведении на него я получаю цвет, который хочу получить. Мне нужен этот цвет фона (#657a8f) и цвет шрифта (#97da6f), когда он также активен, а не для того, чтобы он возвращался к нормальному (color: #b9b9b9; background: #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" к главной навигации.

~

С другой стороны, в раскрывающемся меню (под-навигации) Weebly этого не делает. Таким образом, вам нужно будет отправить его в виде запроса функций на их страницах сообщества.