Navigation roll-over doit être de la même couleur lors de la descente de sublinks
-
22-12-2019 - |
Question
J'ai un projet qui m'oblige à ajouter déroulante de navigation.Je suis à l'aide de GUMBY et ont ajouté les menus déroulants.
Le problème que j'ai est que vous le survol de chaque lien de navigation - les sous-liens déroulante, mais une fois que vous placez la souris sur le sous-liens - la barre de navigation principale couleur de revient.J'ai essayé de styliser une souris en dehors de l'événement, mais qui ne fonctionne pas.
Comment puis-je garder le principal nav lien de la même couleur lorsque vous passer la souris sur le sous-liens?
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>
La solution
dans votre CSS
changement .navbar ul li > a:hover
pour .navbar ul li:hover > a
et a.orange:hover
pour li:hover > a.orange
et comme si ..
Espérons que cela va vous aider ..