Foundation 下拉菜单（Dropdown Menu）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把下拉菜单（Dropdown Menu）讲得透透的！这是 Foundation 6+ 中最强大的导航组件之一，基于 Menu 构建，支持多级嵌套、hover/click 打开、键盘导航、完美响应式（小屏自动适配）。
1. 基本结构（Foundation 6+ 标准写法）
<ulclass="dropdown menu"data-dropdown-menu><li><ahref="#">首页</a></li><liclass="has-submenu"><ahref="#">产品</a><ulclass="submenu menu vertical"data-submenu><li><ahref="#">产品A</a></li><li><ahref="#">产品B</a></li><li><ahref="#">产品C</a></li></ul></li><li><ahref="#">关于我们</a></li><li><ahref="#">联系</a></li></ul>关键点：
- 外层
<ul>加dropdown menu类 +data-dropdown-menu属性 - 有子菜单的
<li>自动添加is-dropdown-submenu-parent（Foundation JS 会自动加） - 子菜单用
submenu menu vertical+data-submenu
2. 垂直菜单 + 多级嵌套（真实项目常用）
<ulclass="vertical dropdown menu"data-dropdown-menu><li><ahref="#">一级菜单1</a><ulclass="menu vertical"><li><ahref="#">二级菜单A</a><ulclass="menu vertical"><li><ahref="#">三级菜单1</a></li><li><ahref="#">三级菜单2</a></li></ul></li><li><ahref="#">二级菜单B</a></li></ul></li><li><ahref="#">一级菜单2</a></li></ul>3. 水平顶部导航（Top Bar 风格）
<divclass="top-bar"><divclass="top-bar-left"><ulclass="dropdown menu"data-dropdown-menu><liclass="menu-text">网站标题</li><li><ahref="#">首页</a></li><liclass="has-submenu"><ahref="#">服务</a><ulclass="submenu menu vertical"><li><ahref="#">设计</a></li><li><ahref="#">开发</a></li></ul></li></ul></div></div>4. 响应式切换（小屏变 Drilldown，大屏变 Dropdown）
加data-responsive-menu属性：
<ulclass="dropdown menu"data-dropdown-menudata-responsive-menu="drilldown medium-dropdown"><!-- 菜单项同上 --></ul>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="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><!-- 水平下拉菜单 --><ulclass="dropdown menu"data-dropdown-menu><li><ahref="#">首页</a></li><li><ahref="#">产品中心</a><ulclass="menu vertical"><li><ahref="#">产品A</a></li><li><ahref="#">产品B</a></li><li><ahref="#">更多</a><ulclass="menu vertical"><li><ahref="#">三级1</a></li><li><ahref="#">三级2</a></li></ul></li></ul></li><li><ahref="#">关于</a></li></ul><!-- 垂直侧边栏菜单 --><ulclass="vertical dropdown menu"data-dropdown-menustyle="width:200px;margin-top:20px;"><li><ahref="#">仪表盘</a></li><li><ahref="#">设置</a><ulclass="menu vertical"><li><ahref="#">账户</a></li><li><ahref="#">隐私</a></li></ul></li></ul><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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”
我立刻给你写好！
