First, the source code:
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name='robots' content='max-image-preview:large' />
<link rel='stylesheet' id='foundation-css' href='https://cdn.jsdelivr.netnpm/[email protected]/dist/css/foundation.min.css' type='text/css' media='all' />
<script type="text/javascript" src="http://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<script type="text/javascript" src="http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
</head>
<body class="home blog">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li>
<a href="#">Item 1</a>
<ul class="vertical menu">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="vertical menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="vertical menu">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js?ver=6.7.4" id="theme-js"></script>
<script>
(function($){
$(document).foundation();
})(jQuery);
</script>
</body>
</html>
As you can see, Foundation 6.8.1 and jQuery 3.7.1 have been added. I’ve initialised Foundation and I know it’s working as the responsive menu is gaining a data-mutate attribute.
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-mutate="4vsm9h-responsive-menu">
<li>
<a href="#">Item 1</a>
<ul class="vertical menu">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="vertical menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="vertical menu">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
However, it’s not adding the dropdown classes or the data-dropdown-menu attribute.
I’ve tried using different versions of Foundation that I’ve used in past projects where the responsive menu worked as expected. I’ve also tried initialising a straight dropdown menu, i.e. data-dropdown-menu, and that also mutates without adding any of the classes to the elements. I’m sure I must be missing something obvious, but I’m just not seeing what could be wrong with it.