Angular+Bootstrap4导航栏下拉菜单hover全屏宽度设置及纯CSS实现

当然可以用纯CSS实现！我们可以利用CSS的transition和max-height来模拟jQuery的slideDown/Up动画，同时通过调整定位让下拉菜单铺满全屏。下面是完整的解决方案，完全不需要依赖jQuery：

完整代码示例 #

HTML（保留Bootstrap基础结构并优化） #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <div class="navbar-nav">
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" aria-haspopup="true" aria-expanded="false">slide down to see</a>
        <div class="dropdown-menu full-width-dropdown" aria-labelledby="navbarDropdownMenuLink">
          <!-- 可选：用container限制内容宽度，避免内容撑满全屏 -->
          <div class="container">
            <a class="dropdown-item" href="#">First Item</a>
            <a class="dropdown-item" href="#">Second One</a>
            <a class="dropdown-item" href="#">The last but not the least</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

CSS（核心实现样式） #

/* 重置Bootstrap下拉菜单默认定位，实现全屏 */
.full-width-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  top: 56px; /* 匹配Bootstrap固定导航栏默认高度，自定义导航栏需调整此值 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease; /* 动画时长与原JS的400ms一致 */
  border-radius: 0; /* 去掉默认圆角，贴合全屏风格 */
  margin-top: 0; /* 移除默认间距，让菜单紧贴导航栏 */
}

/* Hover时触发展开动画 */
.nav-item.dropdown:hover .full-width-dropdown {
  max-height: 500px; /* 设置足够大的值，确保容纳所有下拉内容 */
}

/* 可选：给下拉内容添加内边距，优化视觉体验 */
.full-width-dropdown .container {
  padding: 1rem 0;
}

关键细节说明 #

1. 全屏宽度实现：将dropdown-menu的定位改为fixed，同时设置left:0和right:0，让菜单直接铺满整个视口宽度。top:56px是为了让下拉菜单刚好衔接在导航栏下方（Bootstrap固定导航栏默认高度为56px，若你的导航栏高度不同需对应调整）。

2. 滑入滑出动画：通过max-height的过渡动画模拟slideDown/Up效果。初始状态设置max-height:0并隐藏溢出内容，hover时将max-height设为足够容纳内容的数值，配合transition属性实现平滑的展开/收起。

3. Bootstrap样式兼容：重置了下拉菜单的默认margin-top和border-radius，避免与全屏效果冲突；内部的container容器可以让内容保持居中而非铺满全屏，提升视觉整洁度（可根据需求移除）。

4. 响应式兼容：保留了Bootstrap原生的汉堡菜单逻辑，移动端的导航折叠功能不受影响，下拉效果依然正常工作。

内容的提问来源于stack exchange，提问作者Mr. Learner