JQuery .hover（）はIE7またはIEの互換モードで動作しません

Question

ユーザーが特定のトピックにカーソルを合わせるためのメニューを作成しています。メニューがドロップされ、さまざまなオプションの配列が表示されます。

Safari、Chrome、Firefox、Opera、IE9 - IE8（互換性のないビュー）ではすべてうまく動作しますが、IE7は奇妙なことをしています。

はHTMLでは、私のメニューは次のように構築されています：

<div id="menu_container"> 
<div id="menu_collapse"> 
    <div id="menu"> 
     <div id="home_button"> 
      </div> 
       <ul> 
        <li>Television</li> 
        <li>Radio</li> 
        <li>Get Involved</li> 
        <li>Non-Profit Services</li> 
        <li>Education</li> 
        <li>Donate</li> 
        <li>Extra</li> 
       </ul> 
      </div> 
      <div id="search_menu"> 
       <div id="socialcons"> 
        <img src="css/img/twitter.jpg"> 
        <img src="css/img/facebook.jpg"> 
       </div> 
       <input type="text" name="search"> 
       <button></button> 
      </div> 
     </div> 
    </div> 
</div> 

私のCSSは次のようになります。

#menu_container 
{ 
clear:both; 
float:left; 
width:1000px; 
} 

#menu 
{ 
float:left; 
width:700px; 
height:50px; 
background-color:#654a6f; 
} 

#home_button 
{ 
height:50px; 
width:40px; 
float:left; 
background-image:url('img/home.jpg'); 
background-repeat:no-repeat; 
} 

#menu ul 
{ 
background-color:#485860; 
} 

#menu li img 
{ 
margin:0; 
padding:0; 
} 

#menu li 
{ 
float:left; 
color:#ffffff; 
line-height:50px; 
padding-left:15px; 
padding-right:15px; 
text-shadow:1px 1px 2px #3e204d; 
} 

#menu li.active 
{ 
background-image:url('img/menu_hover.jpg'); 
background-repeat:no-repeat; 
background-position:bottom center; 
} 

#menu li:hover 
{ 
background-image:url('img/menu_hover.jpg'); 
background-repeat:no-repeat; 
background-position:bottom center; 
} 

#menu_collapse 
{ 
position:absolute; 
float:left; 
width:1000px; 
height:50px; 
background-image:url('img/menu_collapse_bg.jpg'); 
background-repeat:repeat-x; 
background-color:#ffffff; 
z-index:99999; 
} 

#search_menu 
{ 
height:40px; 
width:295px; 
padding-right:5px; 
padding-top:10px; 
float:right; 
line-height:50px; 
background-image:url('img/search_menu.jpg'); 
background-repeat:no-repeat; 
} 

#search_menu input 
{ 
float:left; 
width:140px; 
} 

#search_menu button 
{ 
height:32px; 
width:32px; 
border:0; 
outline:0; 
float:left; 
background-image:url('img/search.jpg'); 
} 

#socialcons 
{ 
height:32px; 
width:75px; 
float:left; 
margin-left:20px; 
margin-right:10px; 
line-height:0; 
} 

#socialcons img 
{ 
margin-left:3px; 
} 

をそして、ここで私のjQueryの、Javascriptを：

$(document).ready(function() { 
$('#menu li').mouseover(function() { 
    $('.active').removeClass('active'); 
    $('#menu_collapse').animate({height:'210'}, 300); 
    $('#menu li').mouseout(function() { 
     $(this).addClass('active'); 
    }); 
}); 
    $('#menu_collapse').hover(function(){},function(){ 
     $('#menu_collapse').animate({height:'50'}, 300); 
     $('.active').removeClass('active'); 
    }); 
}); 

でIE7、IEとの互換性のあるすべてのモードでは、div #menu_collapsableは私がその上を動かすと元に戻るので、私はt。

ヘルプ！

Answer 1

$(document).ready(function() { 
    $('#menu li').hover(
     function(){ 
      $('.active').removeClass('active'); 
      $('#menu_collapse').animate({height:'210'}, 300); 
     }, 
     function(){ 
      $(this).addClass('active'); 
     } 
    ); 
    $('#menu_collapse').mouseleave(function(){ 
     $(this).animate({height:'50'}, 300); 
     $('.active').removeClass('active'); 
    }); 
});