向下導航至子鏈接時，導航翻轉需要使用相同的顏色

Question

我有一個項目，要求我添加下拉導航。 我正在使用GUMBY，並添加了下拉菜單。

我遇到的問題是，當您將鼠標懸停在每個主導航鏈接（子鏈接）下拉菜單上時，一旦將鼠標懸停在子鏈接上，主導航顏色就會切換回原來的狀態。 我試圖將鼠標移出事件樣式化，但這不起作用。

將鼠標懸停在子鏈接上時，如何保持主導航鏈接的顏色相同？

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

在您的CSS中

將.navbar ul li > a:hover更改為.navbar ul li:hover > a

和a.orange:hover到li:hover > a.orange

就像這樣..

希望這個能對您有所幫助 ..