hoverIntent with Foundation 5 Menu

Question

I am trying to implement hoverIntent with zurb foundation 5 dropdown menus. The issue is foundation menus are firing immediately on hover. This causes issues when using mega menus.

I can see my event triggers because of the color change but it dosn't effect the timing of the hovering state for mega visible.

Example can be viewed at.. foundation.myplumbingshowroom.com/testing.HTML

<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){$(".hovering").hoverIntent(hoverIn,hoverOut)}); 
 function hoverIn(){$(this).attr("data-options","is_hover:true").css('color', 'red');}
 function hoverOut(){$(this).attr("data-options","").css('color', 'white');}
</script>

<li class="hide-for-medium-down"><a class="hovering" aria-expanded="false" href="#" data-dropdown="menu-1" data-options="is_hover:true" ><strong>Ceiling Lights</strong></a>
 <div aria-hidden="true" style="position:absolute" id="menu-1" data-dropdown-content="" class="mega f-dropdown content row">
   <div class="row">
    <div class="small-3 columns"><img src="http://placehold.it/800x550&text=Image" alt=""/></div>
    <div class="small-3 columns">
     <ul>
       <li><label>Heading 1-1</label></li>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
       <li><a href="#">Link 4</a></li>
     </ul>
    </div>
   </div>
  </div>
 </li>