下拉菜单空间不足时可纯css反向展开：将top:100%改为bottom:100%并配合transform:scaleY(-1)翻转菜单及内部元素，父级li需设position:relative，移动端用:focus-within替代:hover并添加tabindex支持触控与键盘导航。
下拉菜单默认向下展开，但空间不够时会遮挡内容
html5 网站模板里常见的
+
下拉菜单，默认用 CSS 的 top: 100% 实现向下展开。当菜单靠近页面底部、或父容器高度受限时，子菜单会被裁切，用户根本点不到选项。
改用 bottom 定位 + transform 反向展开
不依赖 javaScript 判断位置，纯 CSS 就能翻转方向：把原本的 top: 100% 换成 bottom: 100%，再加 transform: scaleY(-1) 翻转子菜单本身。注意必须同时翻转子菜单里的文字和箭头，否则文字倒置。
- 原样式（向下）：
.dropdown-menu { top: 100%; } - 改为向上（需配合翻转）：
.dropdown-menu { bottom: 100%; transform: scaleY(-1); } .dropdown-menu li, .dropdown-menu a { transform: scaleY(-1); } - 箭头图标也要翻转：
.dropdown-toggle::after { transform: scaleY(-1); }
position: absolute 的参照物必须是 position: relative 父级
很多模板漏写父级定位，导致 bottom: 100% 失效，菜单飞到页面顶部或左上角。检查你的
position: relative。
- 必须存在：
li.dropdown { position: relative; } - 如果父级是
position: relative—— 那会让所有下拉都以整个导航栏为基准，错位更严重 - 移动端适配时，
@media里要同步重置bottom和transform，避免横屏时又翻回去
用 :focus-within 替代 hover，解决触摸设备无法触发问题
纯 :hover 在手机和平板上基本失效。改成 :focus-within 后，点击父级
tabindex="0"）就能展开，且保留键盘导航支持。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构要改：
- 产品
- ...
- 产品
- CSS 触发条件：
li.dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: scaleY(1); } - 记得移除旧的
:hover规则，否则 PC 端可能冲突
实际改起来不难，但容易卡在父级定位缺失、transform 层叠顺序错乱、或触摸设备无响应这三处。尤其注意 transform: scaleY(-1) 会改变子元素的渲染层，如果菜单里用了 z-index，得额外加 transform: translateZ(0) 强制提升层级。