Bootstrap悬停式Mega Menu无法显示问题求助

我看了你的代码，核心问题出在HTML结构和hover触发逻辑上，另外还有一些定位和样式优先级的小问题，下面一步步帮你修正：

问题根源分析 #

1. 你把.dropdown容器放在了Capabilities链接的后面，但这个容器本身没有任何可见内容，用户根本hover不到它，自然无法触发.dropdown-content的显示。
2. 你设置的width:100%是相对于父元素（.dropdown）的宽度，而不是全屏，这会导致菜单宽度不符合预期。
3. Bootstrap的navbar有自带的z-index和定位规则，自定义样式的优先级可能不够。

修正后的完整代码 #

CSS部分 #

/* Mega Menu 核心样式 */
.mega-menu-item {
  position: relative; /* 让子菜单的绝对定位相对于当前导航项 */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100vw; /* 实现全屏宽度 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中，避免偏移 */
  top: 100%; /* 紧贴导航栏下方 */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* 提高层级，确保显示在Bootstrap元素上方 */
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

/* 鼠标hover导航项时显示菜单 */
.mega-menu-item:hover .dropdown-content {
  display: block;
}

/* 你的原有样式优化 */
nav ul li a {
  line-height: 59px;
  transition: background-color 0.8s;
  position: relative;
}

nav ul li a:hover, 
.mega-menu-item:hover a { /* 导航项hover时，链接同步变色 */
  background-color: #EFF3F6;
}

nav ul li a:hover:after {
  content: "";
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #7B8B93;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 箭头居中 */
  bottom: 1px;
}

HTML部分 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <!-- 添加mega-menu-item类，标记带mega菜单的导航项 -->
      <li class="nav-item mega-menu-item">
        <a class="nav-link" href="#">Capabilities</a>
        <!-- 去掉多余的.dropdown容器，直接放置dropdown-content -->
        <div class="dropdown-content">
          <div class="header">
            <h2>Mega Menu</h2>
          </div>
          <!-- 添加container让内部内容和网站排版对齐 -->
          <div class="container">
            <div class="row">
              <div class="col-lg-4">
                <h3>Category 1</h3>
                <!-- 添加d-block让链接独占一行，提升可读性 -->
                <a href="#" class="d-block py-2">Link 1</a>
                <a href="#" class="d-block py-2">Link 2</a>
                <a href="#" class="d-block py-2">Link 3</a>
              </div>
              <div class="col-lg-4">
                <h3>Category 2</h3>
                <a href="#" class="d-block py-2">Link 1</a>
                <a href="#" class="d-block py-2">Link 2</a>
                <a href="#" class="d-block py-2">Link 3</a>
              </div>
              <div class="col-lg-4">
                <h3>Category 3</h3>
                <a href="#" class="d-block py-2">Link 1</a>
                <a href="#" class="d-block py-2">Link 2</a>
                <a href="#" class="d-block py-2">Link 3</a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Solutions</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Clients</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-search"></i></a>
      </li>
    </ul>
  </div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

关键优化点 #

• 结构修正：把.dropdown-content直接放到导航项（.nav-item）下，和触发链接同级，这样用户hover整个导航项区域时就能触发菜单显示。
• 全屏定位：用width:100vw实现全屏宽度，通过left:50%+transform:translateX(-50%)让菜单水平居中，避免因导航项位置导致的偏移。
• 体验增强：给菜单链接添加d-block和py-2类，让链接独占一行并增加内边距，提升可读性和点击体验；添加container让菜单内容和网站其他内容对齐，排版更规整。
• 层级调整：提高.dropdown-content的z-index到1000，确保它能显示在Bootstrap navbar的其他元素上方。

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