html - Javascript not working in IE8 for Dropdown Menu -

i have javascript mega menu not display in ie8. works fine in other browsers. normally, wouldn't care whole lot, our customers older , have lot of traffic in browser. tips?

using jquery 1.10.2

javascript:

<script> jquery(".mega-menu-handle-1").hover( function() { jquery(".mega-menu-1").addclass("display-mega"); }, function() { jquery(".mega-menu-1").removeclass("display-mega"); });</script>  <script>jquery(".mega-menu-handle-2").hover( function () { jquery(".mega-menu-2").addclass("display-mega"); }, function () { jquery(".mega-menu-2").removeclass("display-mega"); });</script>  <script>jquery(".mega-menu-handle-4").hover( function () { jquery(".mega-menu-4").addclass("display-mega"); }, function () { jquery(".mega-menu-4").removeclass("display-mega"); });</script> 

html:

<div class="mega-holder"> <div class="mega-menu mega-menu-1 mega-menu-handle-1"> <ul class="block-grid columns3 no-pad"> <li> <div class="mega-container"> <h3>shop <a class="view-all" href="/collections/air-purifiers/" title="view air purifiers">view all</a></h3> <ul class="block-grid columns2"> <li> <h5>by brand</h5> <ul class="mega-list"> {% link in linklists.air-purifier-brands.links %} <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> {% endfor %} </ul> <h5>more products</h5> <ul class="mega-list"> {% link in linklists.air-purifier-more-products.links %} <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> {% endfor %} </ul> </li> <li> <h5>by concern</h5> <ul class="mega-list"> {% link in linklists.shop-by-concern.links %} <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> {% endfor %} </ul> </li> </ul> </div> </li> <li> <div class="mega-container"> <h3>learn <a class="view-all" href="/pages/air-purifiers-america-learning-center">view all</a></h3> <h5>about air purifiers</h5> <ul class="mega-list"> {% link in linklists.air-purifiers-learn.links %} <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container mega-ad-space"> <a href="{{ settings.mega-menu-1-link }}"> <img src="{{'mega-menu-1-image.png' | asset_url}}" alt="" /> </a> </div> </li> </ul> </div> <div class="mega-menu mega-menu-2 mega-menu-handle-2"> <ul class="block-grid columns3 no-pad"> <li> <div class="mega-container"> <h3>shop <a class="view-all" href="/pages/air-purifier-replacement-filters">view all</a></h3> <h5>by brand</h5> <ul class="mega-list"> {% link in linklists.air-filter-brands.links %} <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container"> <h3>learn <a class="view-all" href="/pages/air-purifiers-america-learning-center">view all</a></h3> <h5>about air purifier filters</h5> <ul class="mega-list"> {% link in linklists.about-air-purifier-filters.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> <h5>about home hvac filters</h5> <ul class="mega-list"> {% link in linklists.about-home-hvac-filters.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container mega-ad-space"> <a href="{{ settings.mega-menu-2-link }}"> <img src="{{'mega-menu-2-image.png' | asset_url}}" alt="" /> </a> </div> </li> </ul> </div> <div class="mega-menu mega-menu-4 mega-menu-handle-4 learning-center"> <ul class="block-grid columns5 no-pad"> <li> <div class="mega-container"> <h5>learn</h5> <img src="{{ 'learning-center-1.jpg' | asset_url | image_tag }}" alt="" /> <ul class="mega-list"> {% link in linklists.learning-center-learn.links %} <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container"> <h5>compare</h5> <img src="{{ 'learning-center-2.jpg' | asset_url | image_tag }}" alt="" /> <ul class="mega-list"> {% link in linklists.learning-center-compare.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container"> <h5>top 3 air purifiers</h5> <img src="{{ 'learning-center-3.jpg' | asset_url | image_tag }}" alt="" /> <ul class="mega-list"> {% link in linklists.learning-center-top-3.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container"> <h5>articles</h5> <img src="{{ 'learning-center-4.jpg' | asset_url | image_tag }}" alt="" /> <ul class="mega-list"> {% link in linklists.learning-center-articles.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <li> <div class="mega-container last-mega-container"> <h5>support</h5> <img src="{{ 'learning-center-5.jpg' | asset_url | image_tag }}" alt="" /> <ul class="mega-list"> {% link in linklists.learning-center-support.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> </div> </li> <div class="clear"></div> </ul> <div class="mega-padding"> <hr /> <a href="#" class="mega-view-all">view all</a> </div> </div> </div> 

i'm working in shopify, liquid handles in there, don't mind them.

i added conditional comment theme it's still not helping. </script>