title: CSS - Hover One Element, Change Visibility on Another
body: <p>HTML is as Follows</p>
  
  <pre><code>&lt;ul id="master"&gt;
   &lt;li class="has-sub"&gt;Item&lt;/li&gt;
     &lt;ul class="sub"&gt;
      &lt;li&gt;Sub One&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS is</p>
  
  <pre><code>.sub { visibility: hidden; }
  #master .has-sub:hover &gt; .sub { visibility: visible;} 
  </code></pre>
  
  <p>I pretty much took the approach from a site where this works, but on my adventure the hero fails. Badly.  What am I doing wrong?</p>