Flyout css transition bij form selectbox

Goedeavond,

Ik krijg er hoofdpijn van. In alle browsers werkt het goed behalve in IE.
Wat is het probleem.

Ik wil graag een verticaal flyout menu maken puur op CSS. Dit lukt aardig. Echter wanneer ik een selectbox in de "uitvliegende" div zet en ik wil deze selecteren voor een andere optie, dan klapt de flyout weer terug.

Voor een voorbeeld zie: http://dev.totaaldakspecialist.nl/ en probeer een optie te selecteren wanneer je links het flyout menu activeert.

Ik gebruik de volgende css code

<div id="slideout">
    <span class="fa fa-envelope-o fa-2x"></span>
	<div id="slideout_inner">
                 <form>
        	     <select style="z-index:1000">
            	        <option>test</option>
                        <option>test</option>
                        <option>test</option>
                     </select>
                </form>
	</div>
</div>

#slideout {
			position: fixed;
			z-index:1000;
			top: 200px;
			left: 0;
			width: 35px;
			padding: 12px 0;
			text-align: center;
			background: #6DAD53;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
			color:#FFF;
			font-size:10px;
		}
		#slideout_inner {
			position: fixed;
			z-index:1000;
			top: 200px;
			left: -450px;
			background: #6DAD53;
			width: 400px;
			padding: 25px;
			height: 500px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
				color:#FFF;
				font-size:10px;
		}
		#slideout_inner textarea {
			width: 190px;
			height: 1000px;
			margin-bottom: 6px;
		}
		#slideout:hover {
			left: 250px;
		}
		#slideout:hover #slideout_inner {
			left: 0;
		}

HOe kan ik dit probleem verhelpen?