CSS Dropdown Menu下拉菜单显示为水平而非垂直如何修复？

问题原因 #

两处全局样式的作用范围覆盖了下拉菜单元素，是布局异常的核心诱因：

• nav li { float: left; } 匹配所有nav下的li元素，下拉菜单内的li也被设置了左浮动，自然横向排列
• nav ul { display: flex; } 匹配所有nav下的ul元素，下拉菜单本身作为ul也被设置为flex布局，flex默认沿水平主轴排列子项

修复代码 #

在你的CSS代码末尾追加以下样式，覆盖全局规则对下拉菜单的影响，同时修复下拉菜单被截断的问题：

/* 让下拉菜单自身改为块级垂直布局，取消flex */
nav ul.dropdown-menu {
  display: block;
  overflow: visible;
}
/* 清除下拉项的左浮动 */
.dropdown-menu li {
  float: none;
}

如果发现下拉菜单显示不全被截断，额外修改原nav ul规则，移除其中的overflow: hidden属性即可。

内容的提问来源于stack exchange，提问作者Jellli