Main Menu text rollover color change

Hi, I am trying to create rollovers for my main menu like this demo: https://kriesi.at/themes/enfold-law/
My site is: http://huntpr.co.za

if i go to advanced styling change color there and click on “Apply only to mouse hover state” nothing happens.
I would like the color to change to ddae87 and the line appear in this color?

Already this code sitting in Quick CSS so not sure if anything blocking:
#top #header.header-scrolled .container.av-logo-container {
background: #88bbc8;
}

#scroll-top-link:hover {
opacity:1 !important;
color:cce4e7 !important;
}

.page-id-734 #contact input[type=’submit’]:hover {
background-color: green !important;
}

/*hide auto sidebar from magazine*/
.page-id-2967 .sidebar .widget_nav_hide_child {
display: none;
}

/*2.8 firefox problem*/
.avia-image-container-inner, .avia_image {
max-width: 100%;
}

#socket .avia-bullet, #socket .avia-menu-fx {
display: none;
}

.container {
padding: 0px 95px;
}

.avia-button.avia-color-grey, .avia-button.avia-color-grey {
color:#faf400!important;
border: 1px solid #faf400!important;
}

h1, h2, h3 {
text-transform: none !important;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal!important;
}

#top * {
border-radius:0 !important;
}

.avia-button {
border: 1px solid !important;
}

#avia-menu #menu-item-3252 .avia-menu-text {
border-color:#ddae87 !important;
}

/* Color section container width */
#team .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}

#top .avia_ajax_form .button {
width: 100%;
}

#top .social_bookmarks li a {
color: #ddae87;
}

@media only screen and (max-width: 1200px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
display: block !important;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special a { border: none !important; }
}

.avia-button:hover {
background-color: #ffffff !important;
color: #231f20 !important;
}

#scroll-top-link {
color: white !important;
border: 1px solid #ddae87 !important;
background-color: #ddae87 !important;
}

.home #av_section_1 a.avia-color-custom {
border:1px solid #ddae87 !important;
}

.avia-team-member .team-social {
background: rgba(17,20,71,0.8);
}

.team-social a {
background: #ddae87;
}

.team-social a::before {
color: #ffffff;
}

.av_menu_icon_beside {
border-right:none;
}

.home #av_section_1 a.avia-color-custom:hover {
border:1px solid white !important;
}

.home #av_section_1 a.avia-color-light:hover {
border:rgba(255, 255, 255, 0.5) !important;
}

.avia-menu {
border-right:none !important;
}

.page-id-734 #contact input[type=’submit’]:hover {
background-color: #ddae87 !important;
border-color: #ddae87 !important;
color: #ffffff !important;
}

.avia-menu-text{
letter-spacing: 2px!important;
}