Customising the Freak Navigation Menu (incl. the Sub-Menu & Dropdown Menu)

Guys,

I have a huge favour to ask. For the site https://www.sustainabilityreporting.asia, I would like to customise the menu to have the following properties:

ON ARRIVAL TO THE SITE,
1. the colour of the link/fonts of the currently active page: #1AB9EB;
2. colour of inactive pages: #FFFFFF;
3. fonts of inactive pages in dropdown and submenu (both do not appear): #FFFFFF;

When hovered over;
1. colour of each link/fonts of all menus: #1AB9EB;

WHEN SCROLLED DOWN A LITTLE AND STATIC-BAR & STATIC MENU APPEARS,
1. colour of the link/fonts of the currently active page: #1AB9EB;
2. inactive: #FFFFFF;
3.fonts of inactive pages in dropdown and submenu (both do not appear yet): #FFFFFF;

When hovered over and submenu drops or appears,
1. currently active page: #1AB9EB;
2. inactive ones: #FFFFFF;

NOTE: The background of the menu, static-bar, static-menu, sub-menu, dropdown menu (basically all the navigation menu) remains the same colour throughout, which is:

background: rgba(135, 135, 135, 0.7);

In my numerous attempts to achieve the above, I still couldn't get it to work and the CSS currently look like:

/* ———- Header ————- */
#top-bar {
background: rgba(135, 135, 135, 0.7);
position: absolute;
bottom: -4px;
left: 0;
right: 0;
border-bottom: solid 4px #1AB9EB;
}
/* ——– Navigation Menu ———- */
#site-navigation {
float: right;
clear: none;
margin-top: 55px;
margin-bottom: 45px;
}
#site-navigation ul {
float: right;
/* for the Currently active page */
}
#site-navigation ul li a {
padding: 10px;
color: #1AB9EB;
background: rgba(135, 135, 135, 0.7);
font-weight: lighter;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 2px;
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-ms-transition: 0.2s all ease;
-o-transition: 0.2s all ease;
}
#site-navigation ul li:hover a {
background: rgba(135, 135, 135, 0.7);
}
#site-navigation ul li ul li .menu-desc {
display: none;
}
#site-navigation ul li ul.sub-menu,
#site-navigation ul li ul.children {
background: rgba(135, 135, 135, 0.7);
color: #1AB9EB;
top: 36px;
left: 1px;
display: block;
transition: 0.4s all ease;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
-ms-transition: 0.4s all ease;
-o-transition: 0.4s all ease;
perspective: 1000;
-webkit-perspective: 1000;
transform-origin: top;
-webkit-transform-origin: top;
transform: perspective(350px) rotateX(-90deg);
-webkit-transform: perspective(350px) rotateX(-90deg);
-moz-transform: perspective(350px) rotateX(-90deg);
}
#site-navigation ul li ul.sub-menu li ul,
#site-navigation ul li ul.children li ul {
transform-origrm-origin: left;
transition: 0.4s all ease;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;in: left;
-webkit-transfo
-ms-transition: 0.4s all ease;
-o-transition: 0.4s all ease;
left: 100%;
top: 0;
opacity: 0;
-webkit-transform: rotateY(65deg) !important;
transform: rotateY(65deg) !important;
-moz-transform: rotateY(65deg) !important;
}
#site-navigation ul li ul.sub-menu li ul li ul,
#site-navigation ul li ul.children li ul li ul {
display: none !important;
}
#site-navigation ul li ul.sub-menu li:hover,
#site-navigation ul li ul.children li:hover {
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-ms-transition: 0.2s all ease;
-o-transition: 0.2s all ease;
/* -webkit-transition: 0.2s all ease !important; */
}
#site-navigation ul li ul.sub-menu li:hover ul,
#site-navigation ul li ul.children li:hover ul {
opacity: 1;
transform: rotateY(5deg) !important;
-webkit-transform: rotateY(5deg) !important;
-moz-transform: rotateY(5deg) !important;
}
#site-navigation ul li ul.sub-menu a,
#site-navigation ul li ul.children a {
padding: 8px 15px;
font-weight: lighter;
font-size: 14px;
background: none;
transition: 0.4s background ease, 0.6s padding ease;
}
#site-navigation ul li ul.sub-menu a:hover,
#site-navigation ul li ul.children a:hover {
background: rgba(255, 255, 255, 0.6);
padding-left: 19px;
}
#site-navigation ul li:hover {
transition: 0.4s all ease;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
-ms-transition: 0.4s all ease;
-o-transition: 0.4s all ease;
-webkit-transition: 0.4s all ease !important;
}
#site-navigation ul li:hover ul.sub-menu,
#site-navigation ul li:hover ul.children {
display: block;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
#site-navigation ul .current_page_item > a,
#site-navigation ul .current-menu-item > a,
#site-navigation ul .current_page_ancestor > a {
color: black;
}
#site-navigation .fa {
padding: 0 5px 0 0;
}
#site-navigation .menu-desc {
font-size: 12px;
font-weight: 300;
color: #999;
display: inline-block;
margin-top: -5px;
font-style: italic;
text-transform: lowercase;
}
#site-navigation .current_page_item > a,
#site-navigation .current-menu-item > a,
#site-navigation .current_page_ancestor > a {
color: #f07261;
}
.slicknav_menu {
display: none;
}
@media screen and (max-width: 600px) {
.slicknav_menu {
display: block;
}
#site-navigation ul.menu {
display: none;
}
.slicknav_nav .menu-desc {
display: none !important;
}
.slicknav_nav a {
color: #777777;
}
.slicknav_nav a .fa {
margin-right: 5px;
}
.slicknav_nav .slicknav_arrow {
display: none;
}
.slicknav_menu {
background: #eee;
}
.slicknav_btn {
background: #ddd;
border: solid 1px #ccc;
}
.slicknav_menutxt {
color: #777777 !important;
text-shadow: none !important;
}
.slicknav_icon-bar {
background-color: #777777 !important;
}
}

/* TOP MENU */
#top-menu,
#static-bar #static-menu {
float: none;
position: relative;
}
@media screen and (max-width: 600px) {
#top-menu,
#static-bar #static-menu {
float: left;
text-align: center;
padding: 15px;
}
}
#top-menu ul,
#static-bar #static-menu ul {
list-style: none;
margin-bottom: 0;
margin-left: 0px;
text-align: center;
position: relative;
transition: 0.4s all ease;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
-ms-transition: 0.4s all ease;
-o-transition: 0.4s all ease;
}
#top-menu ul ul,
#static-bar #static-menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 100%;
z-index: 10999;
text-align: centre;
}
#top-menu ul li,
#static-bar #static-menu ul li {
display: inline;
margin-left: -3px;
position: relative;
}
#top-menu ul li span,
#static-bar #static-menu ul li span {
padding: 16px 5px;
}
#top-menu ul li:hover,
#static-bar #static-menu ul li:hover {
/* DROPDOWN */
}
#top-menu ul li:hover > ul,
#static-bar #static-menu ul li:hover > ul {
display: block;
width: 230px;
background: RGBA (132, 132, 132, 0.9);
left: 0;
top: 36px;
padding: 10px 13px;
color: #848484;
}
#top-menu ul li:hover > ul li,
#static-bar #static-menu ul li:hover > ul li {
display: block;
}
/* THIS IS FOR THE DROPDOWN MENU*/
#top-menu ul li:hover > ul li a,
#static-bar #static-menu ul li:hover > ul li a {
background: rgba (132, 132, 132, 0.9);
padding: 2px;
font-size: 14px;
font-weight: lighter;
color: #FFFFFF;
}
#top-menu ul li:hover > ul li:hover ul,
#static-bar #static-menu ul li:hover > ul li:hover ul {
top: 10px;
left: 100%;
}
#top-menu ul li a,
#static-bar #static-menu ul li a {
padding: 15px 10px;
display: inline-block;
color: #f4f4f4;
font-size: 16px;
font-weight: lighter;
font-family: “Arca Majora”, sans-serif !important;
}
#top-menu ul li a .hvr-shutter-in-vertical,
#static-bar #static-menu ul li a .hvr-shutter-in-vertical {
background: none;
}
#top-menu ul li a:hover,
#static-bar #static-menu ul li a:hover {
text-decoration: NONE;
color: #1AB9EB;
}

/* Static Bar which shows up after we have scrolled a little */
.logged-in #static-bar {
top: 32px;
}
#static-bar {
background: rgba(132, 132, 132, 0.9);
border-bottom: solid 4px rgba(26, 185, 235, 0.8);
display: none;
position: fixed;
top: 0px;
z-index: 1000;
width: 100%;
}
@media screen and (max-width: 768px) {
#static-bar {
display: none !important;
}
}
#static-bar #static-logo {
float: left;
margin-right: 10px;
}
#static-bar #static-logo h1 {
margin: 0;
padding: 5px 10px;
}
#static-bar #static-logo h1 a {
color: #444444;
text-shadow: #777 1px 0px 1px;
}
#static-bar #static-logo img {
max-height: 50px;
}
#static-bar #static-menu {
float: LEFT;
}
#static-bar #static-menu ul li a {
padding: 14px 10px;
}
#static-bar #static-menu ul li:hover > ul {
background: rgba(132, 132, 132, 0.98);
top: 38px;
color: #1AB9EB;
}
static-bar #searchicon {
float: right;
padding: 5px 12px;
padding-top: 7px;
font-size: 24px;
color: #777777;
}
/* top slider */
#slider-bg {
background-size: cover;
}
.slider-wrapper {
margin-top: 60px;
margin-bottom:
-40px;
}
.slider-wrapper .nivoSlider {
box-shadow: none;
background: none;
border: solid 8px rgba(135, 135, 135, 0.9);
outline: solid 1px #878787;
}
.slider-wrapper .nivo-controlNav {
position: relative;
bottom: 55px;
margin-bottom: -20px;
z-index: 9;
}
.slider-wrapper .nivo-controlNav a {
background-image: none;
width: 22px;
height: 6px;
margin: 0 5px;
background: #aaa;
}
.slider-wrapper .nivo-controlNav a:hover {
background: rgba(240, 114, 97, 0.5);
}
.slider-wrapper .nivo-controlNav .active {
background: #1AB9EB;
}
.slider-wrapper .nivo-caption {
bottom: 60px;
left: 65px;
right: auto;
font-family: Arca Majora !important;
background: none;
padding: 0;
transition: 0.4s all ease;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
-ms-transition: 0.4s all ease;
-o-transition: 0.4s all ease;
transform-origin: left bottom;
}
.slider-wrapper .nivo-caption:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
left: 65px;
bottom: 60px;
}
@media screen and (max-width: 660px) {
.slider-wrapper .nivo-caption {
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform-origin: left bottom;
left: 55px;
bottom: 30px;
}
.slider-wrapper .nivo-caption:hover {
transform: scale(0.65);
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
-ms-transform: scale(0.65);
-o-transform: scale(0.65);
left: 55px;
bottom: 30px;
}
}
.slider-wrapper .nivo-caption a {
text-decoration: none;
border-bottom: none;
color: white;
}
.slider-wrapper .nivo-caption .slide-title {
display: inline-block;
font-size: 32px;
font-weight: normal;
text-shadow: 0px 1px 1px black;
transition: 0.4s all ease;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
-ms-transition: 0.4s all ease;
-o-transition: 0.4s all ease;
}
.slider-wrapper .nivo-caption .slide-desc span {
/* border-left: solid 4px black; */
display: inline-block;
font-size: 18px;
font-weight: lighter
padding: 4px;
color: BLACK;
text-shadow: 0px 1px 0px #000;
}`

END OF CSS CODEs

I just could not find the parts to customise for what I want to do.

Any advice?

Appreciate any help.

Thank you,
Andrew