Foundation 下拉菜单（Dropdown Menu）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 下拉菜单（Dropdown Menu）讲得透透的！这是 Foundation 6+ 中最强大的导航组件之一，基于 Menu 构建，支持多级嵌套、hover/click 打开、键盘导航、完美响应式（小屏自动适配）。
1. 基本结构（Foundation 6+ 标准写法）
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">首页</a></li>
<li class="has-submenu">
<a href="#">产品</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
<li><a href="#">产品C</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系</a></li>
</ul>关键点：
- 外层
<ul>加dropdown menu类 +data-dropdown-menu属性 - 有子菜单的
<li>自动添加is-dropdown-submenu-parent（Foundation JS 会自动加） - 子菜单用
submenu menu vertical+data-submenu
2. 垂直菜单 + 多级嵌套（真实项目常用）
<ul class="vertical dropdown menu" data-dropdown-menu>
<li>
<a href="#">一级菜单1</a>
<ul class="menu vertical">
<li>
<a href="#">二级菜单A</a>
<ul class="menu vertical">
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
</ul>
</li>
<li><a href="#">二级菜单B</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a></li>
</ul>3. 水平顶部导航（Top Bar 风格）
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">网站标题</li>
<li><a href="#">首页</a></li>
<li class="has-submenu">
<a href="#">服务</a>
<ul class="submenu menu vertical">
<li><a href="#">设计</a></li>
<li><a href="#">开发</a></li>
</ul>
</li>
</ul>
</div>
</div>4. 响应式切换（小屏变 Drilldown，大屏变 Dropdown）
加 data-responsive-menu 属性：
<ul class="dropdown menu" data-dropdown-menu data-responsive-menu="drilldown medium-dropdown">
<!-- 菜单项同上 -->
</ul>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
<style>
.top-bar { background: #333; }
.top-bar a { color: white; }
</style>
</head>
<body>
<h3>Foundation Dropdown Menu 全家福</h3>
<!-- 水平下拉菜单 -->
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品中心</a>
<ul class="menu vertical">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
<li>
<a href="#">更多</a>
<ul class="menu vertical">
<li><a href="#">三级1</a></li>
<li><a href="#">三级2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
<!-- 垂直侧边栏菜单 -->
<ul class="vertical dropdown menu" data-dropdown-menu style="width:200px; margin-top:20px;">
<li><a href="#">仪表盘</a></li>
<li>
<a href="#">设置</a>
<ul class="menu vertical">
<li><a href="#">账户</a></li>
<li><a href="#">隐私</a></li>
</ul>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方文档和项目中最标准的 Foundation Dropdown Menu 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/dropdown-menu.html
你现在想干嘛？
→ 明天继续讲 Foundation 分页（Pagination）还是表格（Table）？
→ 帮我做一个带图标的多级下拉菜单（比如首页、产品、设置）？
→ 给我一个完整 Top Bar 导航（带 logo + 搜索框 + 下拉菜单）？
直接回复下一句：
“明天讲 pagination”
“帮我做带图标菜单”
“给我完整 Top Bar”
我立刻给你写好！
