Zurb Foundation dropdown menu in IE

Question

I'm trying to get Foundation dropdown menus to work across browsers, but run into issues will ALL versions of IE (7-10, specifically).

I've implemented the JS dropdown menu that is described here ( http://foundation.zurb.com/docs/components/dropdown.html ) as a filter menu. It works in Chrome and FF but not in IE.

The console in IE gives me no indication of what's going on. My guess is it has something to do with IE caching the activeClass so that the dropdown menu never gets updated with new absolute coordinates? I can't tell, and I'm a bit lost.

Here's my code and a link to the live page ( http://lp-beta.myshopify.com/collections/all -- password is 'stack') --

<div class='row options-style'>
  <ul class='large-block-grid-3'>
    <li><a href="#" data-dropdown='brand-filters'>BY BRAND</a></li>
    <li><a href="#" data-dropdown='percent-filters'>BY COCAO PERCENTAGE</a></li>
    <li><a href="#" data-dropdown='flavor-filters'>BY FLAVOR PROFILE</a></li>
  </ul>
</div>

<ul class='f-dropdown options' id='brand-filters' data-dropdown-content>
  <li><div class='option-value'><a href='/collections/all'>All brands</a></div></li>
  {% for product_vendor in shop.vendors %}
    <li><div class='option-value'>{{product_vendor | link_to_vendor }}</div></li>
  {% endfor %}
</ul>

<ul class='f-dropdown options' id='flavor-filters' data-dropdown-content data-option-key='filter'>
  <li><a class='option-value' id='chocolatey' data-option-value='.chocolatey'>Chocolatey</a></li>
  <li><a class='option-value' id='citrus' data-option-value='.citrus'>Citrus</a></li>
  <li><a class='option-value' id='fruity' data-option-value='.fruity'>Fruity</a></li>
  <li><a class='option-value' id='floral' data-option-value='.floral'>Floral</a></li>
  <li><a class='option-value' id='earthy' data-option-value='.earthy'>Earthy</a></li>
  <li><a class='option-value' id='nutty' data-option-value='.nutty'>Nutty</a></li>
  <li><a class='option-value' id='spicy' data-option-value='.spicy'>Spicy</a></li>
  <li><a class='option-value' id='creamy' data-option-value='.creamy'>Creamy</a></li>
</ul>

<ul class='f-dropdown options' id='percent-filters' data-dropdown-content data-option-key='filter'>
  <li><a class='option-value' id='forty' data-option-value='.forty'> Below 40%</a></li>
  <li><a class='option-value' id='sixty' data-option-value='.sixty'> 41% to 60%</a></li>
  <li><a class='option-value' id='eighty' data-option-value='.eighty'> 61% to 80%</a></li>
  <li><a class='option-value' id='hundred' data-option-value='.hundred'> Above 80%</a></li>
</ul>

Answer 1

Foundation 4 does not support IE 8 and below. Foundation 3 supports IE 8 but not IE 7. Check web site for Foundation 3 IE 7 patches.

Your page have multiple references to jquery.js (1.7, 1.9...) and zepto.js. Zepto.js does not support IE; you can replace it with jquery.js; they are compatibile. If possible, try to standardize on one jquery version.