How to change active submenu's background in my weebly (css) code

Question

I got an issue... got no exp in CSS so I'm just trying to figure this out but I couldn't...

In the site I'm making on Weebly I want the submenus to have an 'active' background, which I know how to do but it doesn't work and I don't know why it doesn't? I also want the menu over it to stay active too (but still clickable), even if a submenu under it is active.

https://postimg.org/image/6s8phmliv/ here is an image of what I mean, when I hover it I get the colour I want to get. I need that background color (#657a8f) and font colour (#97da6f) for when it is active too, not for it to return to normal (color: #b9b9b9; background: #657a8f;) when I don't hover over it. Similarly, I can't figure out how to keep the 'Showreel' also highlighted as if active (it has the same active colours as the hovered-over sub-menu.

Here is my code:

/* 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]

Thanks so much for the help! I really don't know much, I just drop things under different codes and see if it updates the right thing so I don't know.. might have also made a mess there?

score 0 · Answer 1 · answered Jul 24 '16 at 15:19

0

This is a pure guess, since it's difficult to test without the full code:

Add to CSS:

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

answered Jul 24 '16 at 15:19

Toby

12,743
8
43
75

score 0 · Answer 2 · answered Jul 26 '16 at 00:22

For the Main Navigation Menu, (the text) you can use:

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

For the Background of the main nav., you can use:

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

This, because Weebly adds id="active" to the main nav.

~

The Dropdown Menu's (sub-nav), on the other hand, Weebly does not do this for. So, you would need to submit it as a features request to them in their Community Pages.

How to change active submenu's background in my weebly (css) code

2 Answers2