changing navigation dropdown box highlight color - html

Question

/* Resets */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
body,
html,
p,
blockquote,
fieldset,
input {
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
/* Global */
body {
position: relative;
width: 100%;
background: #000000;
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.8em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: #66ff00;
-webkit-transition: color 200ms ease-in;
-moz-transition: color 200ms ease-in;
-ms-transition: color 200ms ease-in;
-o-transition: color 200ms ease-in;
transition: color 200ms ease-in;
}
a:hover,
.wsite-com-link:hover .wsite-com-link-text {
color: #66ff00;
}
h2 {
padding-bottom: 10px;
color: #ff6600;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 300;
line-height: 1.3em;
}
p,
div.paragraph {
line-height: 1.8em;
}
blockquote {
position: relative;
display: inline;
color: #ff0000;
padding: 0 1.5em;
border-left: 0 !important;
font-size: 1.35em;
line-height: 1.65em;
}
blockquote:before,
blockquote:after {
position: absolute;
display: inline-block;
font-size: 60px;
line-height: .95em;
color: #66ff00;
}
blockquote:before {
content: '\201C';
left: 0;
top: 0;
}
blockquote:after {
content: '\02EE';
right: 0;
bottom: -0.45em;
margin-left: 5px;
}
input[type="radio"],
input[type="checkbox"] {
width: 16px;
height: 16px;
background: #ff0000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
text-shadow: none;
}
input[type="radio"] {
border-radius: 8px;
}
input[type="checkbox"] {
border-radius: 0;
}
input[type="radio"]:after {
display: block;
border-radius: 8px;
box-sizing: border-box;
content: "";
}
input[type="radio"]:checked:after {
width: 16px;
height: 16px;
background: #linkcolor;
border: 4px solid #e8e8e8;
}
input[type="checkbox"]:after {
position: relative;
top: 2px;
left: 5px;
width: 3px;
height: 6px;
border: solid #LinkColor;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type="checkbox"]:checked:after {
display: block;
content: " ";
}
select {
text-indent: .01px;
text-overflow: '';
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #ff0000;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: normal;
}
.wrapper {
position: relative;
right: 0;
background: #000000;
-webkit-transition: right 610ms cubic-bezier(0, 0.8, 0.55, 1);
-moz-transition: right 610ms cubic-bezier(0, 0.8, 0.55, 1);
-ms-transition: right 610ms cubic-bezier(0, 0.8, 0.55, 1);
-o-transition: right 610ms cubic-bezier(0, 0.8, 0.55, 1);
transition: right 610ms cubic-bezier(0, 0.8, 0.55, 1);
}
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* Header */
.wsite-header-section {
position: relative;
background: url(images/default-bg.jpg) no-repeat;
background-size: cover;
}
.wsite-header-section:before,
.splash-page .header-wrap:before {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 100%;
min-height: 100%;
height: inherit;
background: rgba(0, 0, 0, 0.2);
content: '';
}
.wsite-section-bg-color:before {
display: none;
}
.header-wrap #logo {
padding: 10px 0!important;
text-align: center;
font-family: 'Cookie', cursive;
font-size: 20px;
font-weight: normal;
line-height: 1.1;
}
.header-wrap #logo a {
color: black;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}
.header-wrap #logo a:hover {
opacity: 0.5;
}
.header-wrap #logo img {
display: block;
overflow: hidden;
max-width: 200px;
max-height: 40px;
}
.header-wrap #logo #wsite-title {
display: block;
max-width: 400px;
}
.header-wrap #logo img {
max-height: 40px;
}
.header-wrap .wsite-logo {
padding: 30px 0 0px;
}
.header-wrap .nav-wrap {
position: relative;
z-index: 6;
width: 100%;
background: rgba(0, 0, 0, 0.95);
border-bottom: 1px solid #ff6600;
text-align: center;
}
.header-wrap label.hamburger {
display: none;
}
/* Nav */
.menu {
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
border-top: 1px solid rgba(255, 102, 0, 0.95);
}
.menu ul {
list-style: none;
}
.menu li {
display: inline-block;
padding: 7px 0;
margin-right: 40px;
}
.menu a {
color: #ff6600;
}
.menu .wsite-menu-default li a {
border-bottom: 3px solid transparent;
padding-bottom: 11px;
transition: 0.2s ease-in border-bottom;
letter-spacing: .03em;
}
.menu .wsite-menu-default li a:hover,
.menu .wsite-menu-default li#active a {
border-bottom: 1px solid #ff6600;
}
.menu .wsite-menu-default span li {
margin-right: 40px!important;
}
.menu .wsite-menu-default span:last-child li,
.menu .wsite-menu-default li:last-child {
margin-right: 0;
}
/* Search */
.search {
float: right;
margin-left: 40px;
}
.search .wsite-search + .menu {
text-align: left;
}
.search .wsite-search-input {
width: 140px;
height: auto;
padding: 13px 10px !important;
background: transparent;
color: #66ff00;
border: none;
font-family: 'Lato', sans-serif;
font-size: 1.1em;
font-weight: 400;
line-height: normal;
}
.search .wsite-search-button {
width: 18px;
height: 18px;
background: url(images/search.svg) no-repeat;
background-size: 15px;
margin: 15px 7px 0 3px;
}
#wsite-header-search-form {
border-left: 1px solid rgba(116, 116, 116, 0.15);
border-right: 1px solid rgba(116, 116, 116, 0.15);
}
/* Social */
.wsite-social-item,
#wsite-com-product-social-sharing a {
width: 24px;
height: 24px;
margin-right: 12px;
}
.wsite-social-item:hover,
#wsite-com-product-social-sharing a:hover {
color: #66ff00;
}
.navmobile-wrapper {
display: none;
}
/* Subnav */
#wsite-menus .wsite-menu {
margin-top: 0px!important;
}
#wsite-menus .wsite-menu li a {
font-family: 'Lato-light', sans-serif;
font-size: 15px;
color: #ff6600;
font-weight: 700;
text-transform: uppercase;
padding: 5px 0 !important;
background: rgba(0, 0, 0, 0.50);
border: none;
}
#wsite-menus .wsite-menu li {
border: 0px solid #ff6600;
}
#wsite-menus .wsite-menu li + li {
border-top: none;
}
#wsite-menus .wsite-menu-arrow {
position: absolute;
top: 14px;
right: 0px;
display: inline-block !important;
padding: 0 5px 0 10px;
font-size: 0;
line-height: 0;`enter code here`
}
I need to change subnav dropdown box background highlight color having no luck.I beleive it defaults to a white color and I would like to change it to a black solid color. I would be most grateful of any help provided. Thanks in advance!
Here is the link to my site to allow you to see it in action.http://www.727customz.info/

Answer 1

Try this:
#weebly-menus .weebly-menu li a:hover, #wsite-menus .wsite-menu li a:hover {
background: #xxx;
}
The current style is:
#weebly-menus .weebly-menu li a:hover, #wsite-menus .wsite-menu li a:hover {
background: #e3e3e3;
}
If this doesn't fix it, try adding !important to it like this:
#weebly-menus .weebly-menu li a:hover, #wsite-menus .wsite-menu li a:hover {
background: #xxx !important;
}

Answer 2

#wsite-menus .wsite-menu li a:hover {
color: #66ff00;
background: rgba(0, 0, 0, 0.2);
}
#wsite-menus .wsite-menu li #active a
{
border-bottom: 1px solid #ff6600;
color: #66ff00; this is the text used to correct the issue!
}