title: Keep div:hover open when changing nested select box
body: <p>This is an IE-only problem.  You can <s>see the problem here</s>(dead link) with IE (wait for the page to load, and hover the NY Times icon in the bottom left toolbar. Then try to select a new option). <strong>The Layout:</strong> <code>.toolTip</code> becomes visible when it's parent div is hovered over. Inside of <code>.toolTip</code> is a select box.  When the user opens the select box to make a selection, the parent element gets hidden.</p>
  
  <p>Why is IE thinking that when I hover over the Select box, I am not over the parent div anymore?</p>
  
  <p>Here is some relevant code (pared down for clarity):</p>
  
  <pre><code>#toolBar .toolTip {
      position: absolute;
      display:none;
      background: #fff;
      min-width: 300px;
      }   
  
  #toolBar .socialIcon:hover .toolTip {
      display:block;
      }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="toolBar"&gt;
  &lt;div class="socialIcon"&gt;
       &lt;span class="toolTip"&gt;
           &lt;h1&gt;NY Times Bestsellers Lists&lt;/h1&gt;
             &lt;div id="nyTimesBestsellers"&gt;
               &lt;?php include('/ny-times-bestseller-feed.php') ?&gt;
             &lt;/div&gt;
  
         &lt;p&gt;
            &lt;select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList"&gt; 
              &lt;option value="hardcover-fiction"&gt;Hardcover Fiction&lt;/option&gt; 
              &lt;option value="hardcover-nonfiction"&gt;Hardcover Nonfiction&lt;/option&gt; 
              &lt;option value="hardcover-advice"&gt;Hardcover Advice&lt;/option&gt; 
            &lt;/select&gt;
         &lt;/p&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I've Tried</strong></p>
  
  <p>Moving the select element in and out of other elements. Changing the <code>position</code> and <code>display</code> properties on the select, option, p, span, div, that are involved here.</p>