Navigation roll-over needs to be same color when going down to sublinks

Question

I have a project that requires me to add drop-down navigation. I am using GUMBY and have added the drop-downs.

The problem I am having is as you rollover each main navigation link- the sub-links drop-down but once you mouse over the sub-links - the main navigation color switches back. I've tried to stylize a mouse out event but that doesn't work.

How can I keep the main nav link the same color when you mouseover the sub-links?

http://ffresearch.com/who-we-are-dropdown.html

<style type="text/css">

#nav-orange li a:hover, #nav-orange li:hover a {
 background-color: #fac55f !important;
 color: white;
}

a.drkgreen:hover { background-color: #1f9390 !important; }
a.ltgreen:hover { background-color: #b3d88c !important; }
a.orange { background-color: #ffffff !important; }
a.orange:hover { background-color: #fac55f !important; }

a.ltblue { background-color: #ffffff !important; }
a.ltblue:hover { background-color: #26bfd0 !important; }
a.grey:hover { background-color: #8a949b !important; }  
a.red:hover { background-color: #f16767 !important; }   
a.red { background-color: #ffffff !important; }     
</style>

    <div class="navbar"  gumby-fixed="top" id="nav1" style="background-image: url(img/white_banner_shadow4.png); background-position:bottom; background-repeat:repeat;">
    <div class="row" >
        <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
        <h1 class="four columns logo">
            <a href="index.html">
                <img src="img/FFR-logo3.png" gumby-retina />
            </a>
        </h1>
        <ul class="eight columns" style="margin-top:30px;">
            <li class="active"><a href="index.html" class="drkgreen">Our Difference</a></li>

            <li style="background-color:#b3d88c; color:#FFF !important;" ><a href="who-we-are.html" style="background-color:#b3d88c; color:#FFF !important;"class="ltgreen">Who We Are</a>
                 <span class="not_mobile"><div class="dropdown">
                    <ul>
                      <li><a href="who-we-are.html">Our Mission</a></li>
                      <li><a href="our-leadership.html">Our Leadership</a></li>
                    </ul>
                 </div></span>
            </li>

            <li id="nav-orange"><a href="what-we-do.html" class="orange">What We Do</a>
                 <span class="not_mobile"><div class="dropdown">
                    <ul >
                      <li ><a href="what-we-do.html">Overview</a></li>
                      <li><a href="unique-research-services.html">Unique Research Services</a></li>
                    </ul>
                 </div></span>
            </li>

            <li><a href="our-capabilities.html" class="ltblue">Our Capabilities</a>
                 <span class="not_mobile"><div class="dropdown">
                    <ul>
                      <li><a href="our-capabilities.html">Experience</a></li>
                      <li><a href="qualitative.html">Qualitative</a></li>
                      <li><a href="quantitative.html">Quantitative</a></li>
                      <li><a href="support-services.html">Support Services</a></li>                                                    
                    </ul>
                 </div></span>
            </li>

            <li><a href="connect.php" class="grey">Connect</a></li>

            <li><a href="tips-and-tools.html"class="red">Tips and Tools</a>
                 <span class="not_mobile"><div class="dropdown">
                    <ul>
                      <li><a href="tips-and-tools.html">ProTalk™</a></li>
                      <li><a href="best-practice-tips.html">Best Practice Tips</a></li>
                    </ul>
                 </div></span>
            </li>

        </ul>

    </div>
</div>        

Answer 1

in your CSS

change .navbar ul li > a:hover to .navbar ul li:hover > a

and a.orange:hover to li:hover > a.orange

and like so ..

Hope this will help you ..