title: pure css conditional menu: hide level1 info on level2 hover
body: <p>I'm developing a pure CSS drop down menu with info area.</p>
  
  <p>My Problem is, that i want to show the info of the first level but hide it when you hover over the second level.
  Here's a <a href="http://jsfiddle.net/5Jjfj/2/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>The Problem is, that I don't know how to hide the first level info
  <img src="https://i.stack.imgur.com/ueJKZ.png" alt="Menu Bug"></p>
  
  <p>I know that I can't access the parent, so I tried to make it conditional, like:</p>
  
  <pre><code>menu-level1 &gt; ul &gt; li:not(.menu-level2):hover &gt; .menu-info
  </code></pre>
  
  <p>But it doesn't seem to work.</p>
  
  <p>How do I have to write the condition to get it to work?</p>