changing CSS of right part of top-bar-section in foundation - html

Question

I ma trying to create responsive mega menu with foundation,the problem is that i try every thing but i can't change the color of the right part of my menu it is still black.i change the color of top-bar and it is gray now but the .top-bar-section doesn't change.here is my CSS code:
.top-bar{
background-color:gray !important;
}
.top-bar .expanded{
background-color:gray !important;
}
.top-bar-section ul li.active>a{
color:black !important;
background-color:gray !important;
}
.mega-menu {
border-top: 1px solid #222;
}
.mega-menu .top-bar-section .right> li{
background-color:blue !important;
}
/* Change tab hover state to same colour as content background */
.mega-menu .top-bar .top-bar-section li:hover > a {
color: #222;
background: #FFF;
}
I want to change the background color of the in top-bar-section,but it dosen't change
here is a part of my code:
<div class="mega-menu">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>Tojjar</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a><strong class="fontstyle">درباره ما</strong></a></li>
<li><a><strong class="fontstyle">راهنما</strong></a></li>
<li><a><strong class="fontstyle">تماس با ما</strong></a></li>
thanks.

Answer 1

On my most recent install of FoundationPress, I believe it was the following two properties:
.top-bar-section li.active:not(.has-form) a:not(.button) {background:$color !important;}
And
#media only screen and (min-width: 64.063em){.top-bar-section li:not(.has-form) a:not(.button):hover {background:$color !important;}}
And that side block matched the color I wanted.
(The top-bar color didn't change those two settings)