Parent menu item hover while hovering submenu

Question

I have my site http://jointviews.com/ with the header menu. The header menu items about us and digital marketing has submenus under each. When I hover the dropdown submenu item the parent menu background is changing to the default one. It should be like in the hover position because we are here in the submenus of that particular menu item.

I tried giving

li.current-menu-ancestor {
  color: #fff;
  background: #f29919;
}

But didn't work

please help. thanks.

edit: code

<ul id="menu-main" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-24"><a href="http://jointviews.com/">Home</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://jointviews.com/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="http://jointviews.com/testimonials/">Testimonials</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://jointviews.com/digital-marketing/">Digital Marketing</a>
<ul class="sub-menu">
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://jointviews.com/digital-marketing/seo/">SEO</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://jointviews.com/digital-marketing/social-media-marketing/">Social Media Marketing</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://jointviews.com/digital-marketing/email-marketing/">Email Marketing</a></li>
<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://jointviews.com/digital-marketing/sem/">SEM</a></li>
<li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="http://jointviews.com/digital-marketing/content-marketing/">Content Marketing</a></li>
</ul>
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://jointviews.com/portfolio/">Portfolio</a></li>
<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="http://jointviews.com/blog/">Blog</a></li>
<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="http://jointviews.com/contact-us/">Contact Us</a></li>
</ul>

css:

ul.sub-menu{position:relative;
z-index:40;}
ul#menu-main ul {
display: none;
}

 ul#menu-main li:hover > ul {
    display: block;background-color: #fff;
} ul#menu-main {



position: relative;
display: inline-table;
top: 42px;
position: relative;
float:right;
margin-bottom: 0px;
clear: both;
padding: 0 0 0 20px;
background: transparent!important;
list-style: none;
height: 60px;
font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
font-size: 18px;
}
 ul#menu-main:after {
    content: ""; clear: both; display: block;
 }
 ul#menu-main li {
float: left;
line-height: 60px;
    z-index: 40;
margin-left: 15px;
}

     ul#menu-main li a:hover {
        color: #fff;
background: #f29919;

    }
ul#menu-main ul li{ border-bottom:1px solid #eee;}
 ul#menu-main ul li a:hover {
        color: #818181;
background: #eee;

    }


 ul#menu-main li a {
    display: block;
    font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
    padding: 0 20px;
        color: #818181;
        text-decoration: none;
}
ul#menu-main ul {
 border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
 ul#menu-main ul li {
    float: none; 

    position: relative;
list-style:none;
/*width: 180px;*/
line-height: 37px;
margin-left: 0px;
}ul#menu-main ul li:first-child{border-top: 1px solid white;}

         ul#menu-main ul ul li a:hover {
            color:white;
        }

ul#menu-main ul ul {
position: absolute; left: 100%; top:-1px;
}
ul#menu-main li.current-menu-item > a{
color: #fff;
}


ul#menu-main ul ul li:hover a{
    color: #333333;
}

fiddle

Answer 1

Change

 ul#menu-main li a:hover { ... }

to

 ul#menu-main > li:hover > a { ... }

The > operator is to choose only first level children of the corresponding element.

EDIT: Edited to change previous answer, current one is the better solution with minimum effort.

EDIT2: Removed an extra element which I put there accidentally.