Keep div:hover open when changing nested select box

[rootkey]

This is an IE-only problem. You can see the problem here 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). The Layout: \[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.Why is IE thinking that when I hover over the Select box, I am not over the parent div anymore?Here is some relevant code (pared down for clarity):\[code\]#toolBar .toolTip { position: absolute; display:none; background: #fff; min-width: 300px; } #toolBar .socialIcon:hover .toolTip { display:block; }\[/code\]and\[code\]<div id="toolBar"><div class="socialIcon"> <span class="toolTip"> <h1>NY Times Bestsellers Lists</h1> <div id="nyTimesBestsellers"> <?php include('/ny-times-bestseller-feed.php') ?> </div> <p> <select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList"> <option value="http://stackoverflow.com/questions/4586396/hardcover-fiction">Hardcover Fiction</option> <option value="http://stackoverflow.com/questions/4586396/hardcover-nonfiction">Hardcover Nonfiction</option> <option value="http://stackoverflow.com/questions/4586396/hardcover-advice">Hardcover Advice</option> </select> </p> </span></div></div>\[/code\]What I've TriedMoving 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.