I have a navigation that uses jQuery and CSS to control image mouseover positioning and dropdown menus. Everything works as it should. I have a request from the client though to make one modification.
You can see the example here: http://www.rouviere.com/jr/index.html (best viewed in Firefox or Safari right now)
If you mouse over the links the gold turns to green, however if you mouse over the drop down menu items the parent link changes back to gold. My client would like to have the parent link stay green. So my question is, how do I achieve that?
Here is the css for the parent link mouse over:
ul.dropdown li a.home:hover,
ul.dropdown li a.about:hover,
ul.dropdown li a.portfolio:hover,
ul.dropdown li a.maintenance:hover,
ul.dropdown li a.testimonials:hover,
ul.dropdown li a.contact:hover { background-position: center center; }
Here is the navigation code:
<ul class="dropdown">
<li><a class="home" href="#">Home</a></li>
<li><a class="about" href="#">About Us</a>
<ul class="sub_menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a class="portfolio" href="#">Portfolio</a>
<ul class="sub_menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a class="maintenance" href="#">Maintenance</a>
<ul class="sub_menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a class="testimonials" href="#">Testimonials</a>
<ul class="sub_menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a class="contact" href="#">Contact Us</a></li>
</ul>
And last but not least here is the jQuery:
$(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
Thanks in advance for the help!
Why are you using jQuery to do what CSS lets you do? I think that if you use the following selectors:
It should work.
Edited in response to comment
Demo site seems stable, on Chrome, Firefox and Opera, found over at: http://davidrhysthomas.co.uk/so/parentLiStyles.html, please excuse the ugly. It’s functional, not pretty… =/
Edited to bring the accepted code inline
I figure, at some point, that I might tidy up my site, and the code might be more useful here anyway. So here it is, in its entirety: