Question

I have the following HTML structure:

<ul class="container">
    <li>
        <a href="#" class="option"></a>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
         </ul>
     </li>
</ul>

Is it possible, using CSS, change the backgroung position of “option” when the mouse is over “submenu”?

I saw the CSS Referente and i tried to use “>”, “+” and “~”, but it doesn’t work. I don’t know if i am using incorrectly or if it isn’t possible.

Can anybody help me please?

EDIT 1

Here is the CSS that isn’t working:

a.option~ul.submenu:hover {
    background-position:0 -48px;
}

According CSS Referente, in my case, the “~” selects every “ul” element that are preceded by a “a” element, but isn’t working for my code.

Answer 1

The only way to get close to what you are wanting with your html structure is to put a :hover on the li. Something like:

.container > li:hover > .option {
    background-position: 0 0;
}

See this fiddle which doesn’t change background-position, but color. When hovering over .submenu there will also be a hover on the parent li.