CSS - How to hide div by hovering another div
<p>Hi I have a problem with some css code. I created simple jsfiddle, so I hope you will understand my problem. </p>

<p>Example:</p>

<p><a href="http://jsfiddle.net/LgKkU/1209/" rel="nofollow">jsfiddle.net</a></p>

<pre><code>&lt;div id="main"&gt;
    &lt;div id="one"&gt;
       &lt;p&gt;Hover to hide div below&lt;/p&gt;
    &lt;/div&gt;
      &lt;div id="two"&gt;
       &lt;p&gt;hide me please&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="main"&gt;
    &lt;div id="one"&gt;
       &lt;p&gt;Hover to hide div below (this works)&lt;/p&gt;
       &lt;div id="two"&gt;
       &lt;p&gt;hide me please&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#one{
  background-color:green;
  color:white;
  height:40px;
}
#two{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
#one:hover &gt; #two {
    display:none;
}
#main #one:hover &gt; #main #two {
  display:none;
}
</code></pre>

<p>Thank you and if someone can edit my post and make better title I will be grateful. My English is weak.</p>