Simultaneous CSS hover effect on 2 separate menu elements without wrapper?

Question

The navigation menu of a fictitious company is as follows:

The company specialises in the made-up, "Crab Sitting", but offers two other services that are targeted at people's anthropod pets.

It has been decided that the link to "Services" in the navigation should lead to "Pet Crab Sitting" right away — without a general page about their services.

That is easy to do with HTML:

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/services/crab-sitting/">Services</a>
        <ul>
            <li><a href="/services/crab-sitting/">Crab Sitting</a></li>
            <li><a href="/services/polishing-crustacean-shells/">Polishing Crustacean Shells</a></li>
            <li><a href="/services/massages-for-anthropods/">Massages for Anthropods</a></li>
        </ul>
    </li>
    <li><a href="/contact/">Contact</a></li>
</ul>

But from a UX standpoint, a rollover effect that will change both is necessary to clarify that the two lead to one place.

In other words, making it appear that the two list elements are one link.

How can a :hover effect be achieved on "Services" and "Crab Sitting" at the same time with CSS, but without sacrificing HTML semantics?

Answer 1

else, you may as well filter from href :
This way, it doesn't matter much where similar href link stands, as long as it's being a child within adjacent ul .
http://jsfiddle.net/GCyrillus/b5Lzn/

[href*="crab-sitting"]:hover,  [href*="crab-sitting"]:hover + ul [href*="crab-sitting"] {
    background:green;
}

and if in second link, you forget last slash on href, it still works; http://jsfiddle.net/GCyrillus/b5Lzn/1/

<li><a href="/services/crab-sitting/ ">Services</a>
        <ul>
            <li><a href="/services/crab-sitting ">Crab Sitting</a></li>

Answer 2

the best you can do is:

http://jsfiddle.net/ZVUu2/2/

a.blah:hover
    {color: red;}

a.blah:hover + ul > li > a.blah
    {color:red;}

<ul>
    <li><a href="/">Home</a></li>
    <li><a class="blah" href="/services/crab-sitting/">Services</a>
        <ul>
            <li><a class="blah" href="/services/crab-sitting/">Crab Sitting</a></li>
            <li><a href="/services/massages-for-anthropods/">Massages for Anthropods</a></li>
        </ul>
    </li>
</ul>

Answer 3

li:hover{
 This is for the event on the main li
}

li:hover ul li:first-child{
 here you have selected the first element of the nested ul when the main li is hovered
}

Happy coding