Luxury: jQuery -> hover merkwürdiges Verhalten im Internet Explorer

Beitrag lesen

Hallo,

ich habe den folgenden Code, der eine Art Menü (grünes Div) zeigt, wenn man über das rote div hovert. Auch solange man sich mit der Maus über den Menü selbst befindet, soll es sichtbar bleiben. In Chrome funktioniert alles wunderbar. Nur wenn ich in Internet Explorer etwas aus der dropdown box auswähle, dann befindet sich der Mauszeiger wohl nichtmehr direkt auf dem roten Div und das Menü wird geschlossen. Kennt jemand einen Workaroud für dieses Problem?

Viele Grüße
Luxury

  
<!DOCTYPE HTML>  
<html>  
  
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>  
	<style type="text/css">  
		.test{  
			background:red;  
			width:200px;  
			height:100px;  
			  
		}  
		  
		.menu{  
			position:relative;  
			top:100px;  
			height:300px;  
			width:200px;  
			  
			background:green;  
			display:none;  
		}  
		  
	</style>  
  
	<body>  
		<div class="test">  
		<div class="menu">  
			  
				  
			<select>  
				<option>o1</option>  
				<option>o2</option>  
			</select>  
				  
				  
			  
		</div>  
		  
		  
		<script type="text/javascript">  
		  
			$('.test').hover(function(){  
				$('.menu').show();  
			  
			}, function(){  
				$('.menu').hide();  
			});  
			  
			$('.menu').hover(function(){  
				$('.menu').show();  
			}, function(){  
				$('.menu').hide();  
			});  
			  
			  
		  
		</script>  
	</body>  
</html>