Domanda

Ho un progetto che mi richiede di aggiungere navigazione a discesa.Sto usando Gumby e ho aggiunto i drop-down.

Il problema che sto avendo è come il rollover a ciascun collegamento di navigazione principale - il menu a discesa secondari, ma una volta del mouse sopra i sottoclitti: il colore di navigazione principale si accende.Ho provato a stilizzare un evento del mouse out ma che non funziona.

Come posso mantenere il collegamento NAV principale dello stesso colore quando si tocca i sottotitoli?

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>        
.

È stato utile?

Soluzione

nel tuo CSS

Cambia .navbar ul li > a:hover in .navbar ul li:hover > a

e a.orange:hover a li:hover > a.orange

E come così ..

Spero che questo ti aiuterà ..

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top