0

我有一个项目需要我添加下拉导航。我正在使用 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™&lt;/a></li>
                      <li><a href="best-practice-tips.html">Best Practice Tips</a></li>
                    </ul>
                 </div></span>
            </li>

        </ul>

    </div>
</div>
4

1 回答 1

0

在你的CSS

更改.navbar ul li > a:hover为.navbar ul li:hover > a

并a.orange:hover_li:hover > a.orange

就像这样..

希望对你有帮助 ..

于 2014-07-31T15:18:12.920 回答