title: How do I create a menu that appears on hover?
body: <p>I have a menu I created that I would like to appear on hover over of an image.  How do I write the css to create that?  This is my menu:</p>
  
  <pre><code>&lt;ul id="options" class="optionsMenu"&gt;
      &lt;li&gt;A&lt;/li&gt;
      &lt;li&gt;B&lt;/li&gt;
      &lt;li&gt;C&lt;/li&gt;
      &lt;li&gt;D&lt;/li&gt;
      &lt;li&gt;E
          &lt;ul&gt;
              &lt;li&gt;E1&lt;/li&gt;
              &lt;li&gt;E2&lt;/li&gt;
              &lt;li&gt;E3&lt;/li&gt;
              &lt;li&gt;E4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;F&lt;/li&gt;
      &lt;li&gt;G&lt;/li&gt;
     &lt;/ul&gt;
  </code></pre>
  
  <p>I would like it to stay hidden and only appear when I hover over the following image:</p>
  
  <pre><code>&lt;img src='...image.png' alt='Options Menu' id="optionsMenuTree"/&gt;
  </code></pre>
  
  <p>I think I need to do something like this:</p>
  
  <pre><code>#options ul.optionsMenu ul{
      display: none;
      visibility: none;
  }
  #optionsMenuTree:hover &gt; ul {
      display: block;
  }
  </code></pre>
  
  <p>But I cannot get it to work right.  Any help?</p>