I'm building a new site using the zurb_foundation theme. I can get the megamenu to work using one of the base Drupal themes, but as soon as I switched to my zurb sub-theme, it stops working (e.g. when I hover over menu items, it doesn't expand as expected).

In the Firebug console, I see an error "jQuery is undefined". I read that this may be because the jQuery script is included after this script section.

<code>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
(function($) {
$(document).ready(function(){
var option = Drupal.settings.mmoptions_1;
$("#megamenu-1 > ul").megadrupalMenu(option);
selectnav('mdmegamenu-1', {
label: '--- Table of content ---',//first select field
nested: true,
indent: '-'
});
});
})(jQuery);
//--><!]]>
</script>

</code>

Has anyone else run into this issue? Do you have any ideas on how I can fix this?