title: How to not hover on visibility hidden elements?
body: <p>In the following two snippets of HTML code, I want the outer DIV to look the same width as the most widest element, and whenever I hover on <code>.title</code>, the '.menu' shows.</p>
  
  <pre><code>&lt;div&gt;
        &lt;span class="title"&gt;abcdefghijklmn&lt;/span&gt;
        &lt;span class="menu"&gt;
             &lt;span class="child"&gt;abcde&lt;/span&gt;
             &lt;span class="child"&gt;abcd&lt;/span&gt;
             &lt;span class="child"&gt;abc&lt;/span&gt;
             &lt;span class="child"&gt;ab&lt;/span&gt;
        &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Notice the words in <code>.title</code> is longer than those in <code>.child</code></p>
  
  <pre><code>&lt;div&gt;
        &lt;span class="title"&gt;abcde&lt;/span&gt;
        &lt;span class="menu"&gt;
             &lt;span class="child"&gt;abcdefghijklmn&lt;/span&gt;
             &lt;span class="child"&gt;abcd&lt;/span&gt;
             &lt;span class="child"&gt;abc&lt;/span&gt;
             &lt;span class="child"&gt;ab&lt;/span&gt;
        &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to use the following CSS to get around to it, but <code>hover</code> didn't work out well.</p>
  
  <pre><code>.container {
    color:#fff;
    display: inline-block;
  }
  .title {
    background: blue;
  }
  .title, .menu {
      display: list-item;
  }
  
  .menu {
    visibility: hidden;
  }
  
  .child {
      display: block;
      background: red;
  }
  
  .title:hover + span{
      visibility: visible;
  }
  .menu:hover {
    visibility: visible;
  }
  </code></pre>
  
  <p>see <a href="http://jsbin.com/zolopa/1/edit" rel="nofollow">JS Bin</a> here</p>
  
  <p><strong>Notice</strong> here, I didn't use <code>display</code> to toggle the <code>.menu</code>, because when <code>hover</code> on <code>div</code> you get to see <code>.title</code> get expanded quite obnoxiously. So I turned to using <code>visibility</code>, but another issue popped up, is that I can <code>hover</code> on <code>div</code> even I am not on '.title`, is there a workaround to this whole thing? or hovering on visibility hidden elements can be avoided?</p>