Search code examples
cssnavigationhovermenuitemsemantic-markup

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

The navigation menu of a fictitious company is as follows:

enter image description here

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?

Solution

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