CSS, jQuery and Navigation Control - a minor tweak needed_问答_开发者

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="#">It开发者_StackOverflowem 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(" &raquo; ");

});

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:

ul.dropdown li a.home:hover,
ul.dropdown li:hover { /* this targets the parent li's default hover state set it to the green colour */ }

ul.dropdown li ul li:hover,
ul.dropdown li ul li a:hover { /* this targets the dropdown li's default state set this to gold */ }

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>list styling demo-page for Stackoverflow.com question 1517220</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover  {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a  {width: 10em;
                    border
                    }

    #code           {white-space: pre-wrap;
                    width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    line-height: 1.2em;
                    font-family: consolas, mono;
                    }

    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

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


<div id="code">
    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover
                    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover
                    {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a
                    {width: 10em;
                    border
                    }
</div>

</body>

</html>

Try something like this:

$('ul.dropdown li').hover(function() {
    $(this).parents('ul').addClass('hover');
});

you can add a jQuery hover event handler for "sub_menu", and change the color of the dropdown manually.

$(this).parents('li').addClass('hover');

That should get the parent li and give it the hover class. Do the opposite (removeClass()) in the second function to get rid of the color.

If this has multiple li parents, it should give them the hover class as well. If you only want the first li then use li:first as the selector.

http://jeffrupert.com/test/ There's a working example. I used bind('mouseover' and bind('mouseout' simply because that's what I'm used to doing. I used your exact HTML, so hopefully that helps... All of the code is inline on the page, so it's easy to view.