原生 下拉面板由浏览器控制，脱离 DOM 流，不受父级 z-index 和 position 约束，导致裁剪、点击失效、定位异常；推荐用 替代，语义正确、无需 JS、键盘友好，兼容 Chrome 12+/Firefox 49+/Safari 15.4+。
导航栏里放 <select></select> 会错位或遮挡，为什么
直接把 <select></select> 塞进横向 <nav></nav> 或 <ul></ul> 的 <li> 里，常见问题不是“不显示”，而是：下拉箭头被裁剪、点击无反应、展开后位置飘在页面顶部（尤其在 transform 或 overflow: hidden 父容器里）。根本原因是原生 <select></select> 的下拉面板由浏览器控制，脱离当前 DOM 流，不受父级 z-index 和 position 约束。
用 <details><summary></summary></details> 替代 <select></select> 最轻量
如果只是需要“点开选一项”，且兼容性要求是 Chrome 12+ / Firefox 49+ / Safari 15.4+，<details></details> 是最干净的方案——它原生支持键盘操作（Space/Enter 展开）、语义正确、无需 JS 就能联动状态，且下拉内容完全受 CSS 控制。
示例结构：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<nav>
<ul style="display: flex; list-style: none; margin: 0; padding: 0;">
<li><a href="/home">首页</a></li>
<li>
<details style="margin: 0;">
<summary style="cursor: pointer; padding: 8px 12px; background: #f5f5f5;">产品</summary>
<ul style="margin: 0; padding: 4px 0; background: white; border: 1px solid #ddd;">
<li><a href="/pro/a">产品 A</a></li>
<li><a href="/pro/b">产品 B</a></li>
</ul>
</details>
</li>
</ul>
</nav>- 必须给
<details></details>加style="margin: 0;"，否则默认上下外边距会撑开导航高度 -
<summary></summary>默认有list-style和焦点 outline，需手动重置 - 展开的
<ul></ul>要设position: absolute并配合top: 100%才能精准贴在 summary 下方，上面示例用了 inline style 简化，实际项目建议抽离为 class
要支持 IE 或老版本 Safari？用 position: absolute + JS 控制显隐
原生 <select></select> 无法可靠嵌入导航栏，但可以用一个按钮模拟触发，再用绝对定位的 <div> 容器承载自定义选项列表。关键在于定位锚点和层级控制：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>包裹 <code><select></select> 的 <li> 必须设 position: relative
position: absolute; top: 100%; left: 0; z-index: 1000;
focus 和 blur（而非仅 click），否则键盘 Tab 进入时会失效display: none 切换，改用 visibility: hidden; opacity: 0; 配合 transition，否则屏幕阅读器可能跳过下拉菜单宽度不对齐？检查 box-sizing 和 padding
横向导航栏中，<li> 宽度常靠 flex 或 inline-block 分配，但下拉层若没继承父级 box-sizing: border-box，加上默认 padding 和 border，就会比导航项宽出几个像素——看着像“右偏”。解决方式很直接：
- 统一设置
* { box-sizing: border-box; }（现代项目基本都该加） - 下拉容器的
width显式设为100%，而非依赖内容撑开 - 如果用
min-width: max-content让下拉项自动适应最长文字，记得加white-space: nowrap防止换行破坏宽度计算
真正麻烦的是多级下拉——第二级要相对于第一级右侧定位，这时候 left: 100% + top: 0 是基础，但得额外处理子菜单超出视口右边界的问题，这已经超出“嵌入下拉选择”的原始需求了。
