JavaScript实现的onclick点击下拉菜单添加后续div后无法正常显示问题

问题原因 #

• 加position: relative后下拉菜单无法弹出：你的.navbar类中设置了overflow: hidden，该属性会裁剪所有超出.navbar容器边界的内容，你的下拉菜单高度为450px，远超出导航栏本身高度，触发裁剪后就无法看到弹出的菜单。
• 未加position: relative时阴影无法显示：普通文档流元素的z-index属性不生效，后续的.container元素在文档流中顺序更靠后，会默认覆盖住导航栏的底部阴影。

解决方案 #

仅需要修改两处CSS规则即可同时满足阴影显示和下拉菜单弹出的需求：

1. 移除.navbar类中的overflow: hidden属性，新增清除浮动的伪元素规则，避免浮动元素导致导航栏高度塌陷：

.navbar
{
    width: 100%;
    padding: 0 10% 0 10%;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    z-index: 4;
    position: relative;
}
/* 新增清除浮动规则 */
.navbar::after {
    content: "";
    display: block;
    clear: both;
}

2. 可选优化：将.dropdown-content的z-index调整为更高的数值，避免下拉菜单被页面其他层级元素覆盖：

.dropdown-content 
{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 460px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    height: 450px;
    border-radius: 3.5px;
    z-index: 99; /* 调高z-index值 */
    border-top: 2px solid #000;
}

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