title: CSS :hover affect element before the element pointed
body: <p>I have the following HTML structure:</p>
  
  <pre><code>&lt;ul class="container"&gt;
      &lt;li&gt;
          &lt;a href="#" class="option"&gt;&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item A&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item B&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is it possible, using CSS, change the backgroung position of "option" when the mouse is over "submenu"?</p>
  
  <p>I saw the <a href="http://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow">CSS Referente</a> 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.</p>
  
  <p>Can anybody help me please?</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Here is the CSS that isn't working:</p>
  
  <pre><code>a.option~ul.submenu:hover {
      background-position:0 -48px;
  }
  </code></pre>
  
  <p>According <a href="http://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow">CSS Referente</a>, in my case, the "~" selects every "ul" element that are preceded by a "a" element, but isn't working for my code.</p>