Bootstrap右侧导航下拉菜单移动端覆盖及悬停子菜单消失修复求助

我来帮你一步步修复这些导航菜单的问题，咱们逐个击破：

先修正HTML里的基础错误 #

你代码里的data- toggle="dropdown"多了个空格，应该是data-toggle="dropdown"，而且不需要data-target=".navbar-collapse"，先把这个修正，不然下拉触发逻辑会出问题。

问题1：移动端下拉菜单覆盖其他菜单项（不推动元素） #

默认Bootstrap下拉菜单是绝对定位（position:absolute），会脱离文档流，所以不会撑开父元素、推动下方内容。我们可以通过媒体查询，在移动端把下拉菜单改成静态定位，让它留在文档流内，自然实现推动效果：

/* 针对移动端（屏幕宽度≤767px）调整下拉菜单 */
@media (max-width: 767px) {
  .dropdown-content {
    position: static !important;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: rgba(0,0,0,0.1); /* 可根据你的主题调整背景色 */
    border: 0;
    box-shadow: none;
  }
  .dropdown-content li a {
    color: #fff; /* 保持移动端文字颜色和父菜单一致 */
    padding: 8px 20px;
  }
}

问题2：折叠状态下鼠标移向子菜单时消失 #

折叠后的菜单是点击触发，但默认的悬停事件在小屏幕下容易和点击事件冲突。我们可以拆分逻辑：桌面端用悬停显示下拉，移动端用点击触发；同时给子菜单加一点内边距，让鼠标移动时不会轻易离开触发范围：

/* 给下拉菜单基础样式 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* 桌面端（屏幕宽度>767px）悬停显示下拉 */
@media (min-width: 768px) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

问题3：桌面端父菜单项链接无效 #

因为你给父菜单项加了data-toggle="dropdown"，点击时会优先触发下拉而不是跳转链接。我们可以通过简单的JS区分设备状态：桌面端让父链接直接跳转，移动端保留下拉触发：
首先修改HTML，给父菜单项加个标识类：

<li class="dropdown desktop-link" data-toggle="dropdown">
  <a href="belize-tours.html">Tours<i class="fa fa-caret-down"></i></a>
  <!-- 子菜单内容不变 -->
</li>

然后添加JS代码（放在页面底部或者DOM加载完成后）：

document.addEventListener('DOMContentLoaded', function() {
  const parentLink = document.querySelector('.desktop-link a');
  
  // 根据窗口尺寸切换下拉触发逻辑
  function toggleDropdownBehavior() {
    if (window.innerWidth > 767) {
      parentLink.removeAttribute('data-toggle');
    } else {
      parentLink.setAttribute('data-toggle', 'dropdown');
    }
  }
  
  // 初始加载时执行一次
  toggleDropdownBehavior();
  
  // 窗口大小变化时重新判断
  window.addEventListener('resize', toggleDropdownBehavior);
});

修改后的完整代码整合 #

修正后的核心HTML片段 #

<li class="dropdown desktop-link" data-toggle="dropdown">
  <a href="belize-tours.html">Tours<i class="fa fa-caret-down"></i></a>
  <ul class="dropdown-content">
    <li><a href="belize-atm-cave-tour.html">ATM Cave</a></li>
    <li><a href="mountain-pine-ridge-belize.html">Pine Ridge Tour</a></li>
    <li><a href="caracol-belize-tour.html">Caracol Site</a></li>
    <li><a href="horseback-riding-belize.html">Horseback Riding</a></li>
    <li><a href="cave-tubing-belize-tour.html">Cave Tubing w/ Zip</a></li>
    <li><a href="visiting-tikal-from-belize.html">Tikal Tours</a></li>
    <li><a href="barton-creek-cave-tour-belize.html">Barton Creek</a></li>
    <li><a href="belize-zip-lining-tours.html">Zip-lining</a></li>
    <li><a href="belize-river-canoeing-kayaking-tours.html">Canoeing/Kayaking</a></li>
  </ul>
</li>

完整CSS（原有样式+新增修复） #

.main-menu {position:relative;} 
.main-menu ul .nav .navbar-nav { text-align:right; float:none;}

.main-menu .nav li { 
  position:relative; 
  z-index: 1; 
  padding: 5px 12px 0px; 
  -webkit-transition:all 0.2s linear; 
  -moz-transition:all 0.2s linear; 
  -ms-transition:all 0.2s linear; 
  -o-transition:all 0.2s linear; 
  transition: all 0.2s linear;
}

.main-menu .nav li a { 
  padding: 11px 0 29px; 
  color: #fff; 
  font-size: 16px; 
  text-transform: capitalize; 
  font-family: 'Poppins', sans-serif; 
  font-weight:500; 
  -webkit-transition: all 0.25s ease-in-out 0s; 
  -moz-transition: all 0.25s ease-in-out 0s; 
  -o-transition: all 0.25s ease-in-out 0s; 
  transition: all 0.25s ease-in-out 0s;
}

.main-menu .nav li.active a, .main-menu .nav li a:hover, .main-menu .nav li a:focus { 
  color: #00d8ff; 
  background-color:transparent; 
  text-align: center;
}

.main-menu .nav a:before { 
  position: absolute; 
  content: ""; 
  width: 0px; 
  height: 2px; 
  bottom: -2.4px; 
  left: 0; 
  background: transparent; 
  -webkit-transition: .3s ease-in-out; 
  -ms-transition: .3s ease-in-out; 
  -moz-transition: .3s ease-in-out; 
  -o-transition: .3s ease-in-out; 
  transition: .3s ease-in-out;
}

/* 新增下拉菜单基础样式 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* 桌面端悬停显示下拉 */
@media (min-width: 768px) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* 移动端下拉菜单改为静态定位，推动其他元素 */
@media (max-width: 767px) {
  .dropdown-content {
    position: static !important;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: rgba(0,0,0,0.1);
    border: 0;
    box-shadow: none;
  }
  .dropdown-content li a {
    color: #fff;
    padding: 8px 20px;
  }
}

这些修改应该能解决你遇到的所有问题：

• 移动端下拉菜单会推动下方菜单项，不再覆盖
• 折叠状态下鼠标移向子菜单不会消失
• 桌面端点击父菜单项会正常跳转到链接，悬停显示子菜单
• 移动端点击父菜单项触发下拉，子菜单正常展开

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