jquery - Foundation 5メニューでのhoverIntent

Question

zurb Foundation 5 ドロップダウン メニューで hoverIntent を実装しようとしています。問題は、基盤メニューがホバー時にすぐに起動することです。これにより、メガ メニューの使用時に問題が発生します。

色の変化によりイベント トリガーを確認できますが、メガ ビジブルのホバリング状態のタイミングには影響しません。

例は、 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>