title: Hover an element affects another. Not a sibling nor a child
body: <p>I'm currently doing an experimental page for college and I came upon a simple problem with a huge amount of brain burned. The idea is that you don't have to click in anything to navigate the site, giving you a very fluid, light experience to the user. </p>
  
  <p>Well I've got this list that each of it's items have to trigger a div to come by and be nice. I was experimenting with CSS3's sibling selector tilde and make the div have a left:0 when the li is called. The only problem is the simbling selector only works if the object doesn't have a parent of it's own. I've tried calling it's hole family like "#father-element #child-element:hover ~ #father-element2 #child-element 2" but it ignores me completely like I'm some kind of idiot.</p>
  
  <p>Here's the link of a simplified version of the headburner: <a href="http://jsfiddle.net/GuiHarrison/rDnYE/" rel="nofollow">http://jsfiddle.net/GuiHarrison/rDnYE/</a></p>
  
  <p>So what do you think, guys? Should I shut up and try jQuery (if so, how?) or there really is a way in CSS?</p>