导航栏Dropdown菜单与overflow:hidden属性冲突问题求助

你的问题核心是浮动元素导致的父容器高度塌陷，以及overflow:hidden的副作用：

• 导航栏内的.navbar-title和.navbar-nav使用了float，脱离文档流后导致.navbar没有自动高度，引发布局错乱；
• 添加overflow:hidden虽能触发BFC（块级格式化上下文），强制父容器包裹浮动元素解决高度塌陷，但会裁剪所有超出容器边界的内容——你的下拉菜单是绝对定位元素，会超出.navbar范围，因此被隐藏。

方案一：伪元素清除浮动（最小代码改动） #

无需依赖overflow:hidden，给.navbar添加清除浮动的伪元素，既能让父容器正常包裹内部浮动元素，又不会影响下拉菜单显示：

修改.navbar的CSS，新增伪元素样式：

.navbar {
    text-align: center;
    background-color: #197053;
    margin: 0px;
    padding: 0px;
    position: relative;
    box-shadow: 0px 1px 5px #262626;
    /* 移除overflow:hidden */
}

/* 添加清除浮动的伪元素 */
.navbar::after {
    content: "";
    display: table;
    clear: both;
}

方案二：Flex布局重构（更现代稳定） #

浮动是旧版布局方案，改用Flex可彻底规避这类问题，代码更简洁易维护：

修改.navbar及子元素的CSS：

.navbar {
    text-align: center;
    background-color: #197053;
    margin: 0px;
    padding: 0px;
    position: relative;
    box-shadow: 0px 1px 5px #262626;
    /* 启用flex布局 */
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar-title {
    /* 移除float */
    margin: 0px;
}

.navbar-current {
    /* 移除绝对定位，用margin:auto实现居中 */
    margin: 0 auto;
}

ul.navbar-nav {
    /* 移除float */
    margin: 0px;
    list-style-type: none;
    padding: 0px;
    /* 自动推到右侧 */
    margin-left: auto;
}

.navbar-nav li {
    /* 移除float */
    display: inline-block;
}

两种方案都能让导航栏布局稳定，同时保证下拉菜单hover时正常显示。

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