How to prevent hide-on-mouseleave when hovering over child drop-down-menu?

Question

If in http://jsfiddle.net/MG4hw/12/ you click on the red "start"-button, an iframe-element is displayed. When you hover off the iframe-element it is again hidden. So far that's the desired behaviour.

What's not desired, however, is that the iframe is also hidden whenever I open any drop-down-menu inside it and hover over the drop-down in order to select a value. By any I mean not just drop-down-menus like select-fields coded by me, but also e.g. autocomplete suggestions by the web browser pertaining to input-fields.

At least for the first case (the select-field coded by me), let's assume the code underlying such a drop-down-menu is as follows (you also find the according birthday-field in the fiddle if you manage to scroll all the way to the right):

<fieldset>
   <legend>Geburtstag</legend>
        <select name="birthDay" id="birthDay">
           <option value="tag">Day</option>
           <option value="01">01</option>
           <option value="02">02</option>
           <option value="03">03</option>
           <option value="04">04</option>
           <option value="05">05</option>
           ...
        </select>
</fieldset>

How can I prevent the iframe from disappearing when hovering over the drop-down-menu?

Thank you very much in advance!

Answer 1

this has somehow to do with this problem. dont ask me why, but this works for me.

    $('#iframe_register').on("mouseleave", function (e) {
        if(e.relatedTarget != null) {
            $(this).hide();
        }
    });