Sidenav下拉子菜单移出主项悬停后消失的问题求助

阿华AIGC实验室

2026-5-7

解决侧边导航悬停下拉菜单移出主项消失的问题

嘿Tom，我完全懂你的困扰——当下拉菜单刚弹出来，你鼠标移过去的瞬间，因为离开了主菜单项的hover范围，下拉就直接消失了，而且主菜单项还得保留跳转功能，不能改成点击触发。咱们调整一下CSS的逻辑就能搞定，核心思路是把hover状态绑定到包含主链接和下拉的父容器上，而不是单独的主链接。

问题根源

你原来的代码是监听主<a>标签的hover来显示下拉，但下拉是主链接的兄弟元素，当鼠标移到下拉上时，主链接的hover状态就消失了，下拉自然也就隐藏了。而且下拉和主链接之间还有空隙，鼠标移过去的时候会经过这个空隙，直接导致hover中断。

修复方案

我们把hover触发逻辑转移到父容器（比如#Producten、#Trainers这些包裹主链接和下拉的div）上，同时调整下拉的定位，让它和主链接紧挨着，消除空隙。这样只要鼠标在父容器范围内（包括主链接和下拉），hover状态就会保持，下拉也不会消失。

以下是修改后的完整代码：

CSS 部分

/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 12px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

/* 给包含下拉的父容器设置相对定位和固定高度，确保hover范围正确 */
#Producten, #Trainers, #Contact {
  position: relative;
  height: 45px; /* 和主链接的高度匹配 */
}

/* 父容器hover时，主链接滑入 */
#Home:hover a,
#Info:hover a,
#Producten:hover a,
#Trainers:hover a,
#Contact:hover a,
#FAQ:hover a {
  left: 0;
}

/* 主菜单项样式 */
.Home {
  top: 20px;
  background-color: #4CAF50;
}
.Info {
  top: 80px;
  background-color: #2196F3; /* Blue */
}
.Producten {
  top: 140px;
  background-color: #f44336; /* Red */
}
.Trainers {
  top: 200px;
  background-color: #555 /* Light Black */
}
.Contact {
  top: 260px;
  background-color: purple;
}
.FAQ {
  top: 320px;
  background-color: rgba(245, 240, 15, 0.7)
}

/* 下拉菜单基础样式：默认隐藏，添加过渡效果 */
.DropdownGroepstraining,
.DropdownPrivetraining,
.DropdownTrajectopmaat,
.DropdownPieter,
.DropdownLaura,
.DropdownYannick,
.DropdownSander,
.DropdownNick,
.DropdownContactform,
.DropdownFacebook,
.DropdownInsta {
  position: absolute;
  left: 100%; /* 刚好在主链接右侧，消除空隙 */
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

/* 父容器hover时，显示对应的下拉菜单 */
#Producten:hover .DropdownGroepstraining {
  top: 0;
  opacity: 1;
  visibility: visible;
}
#Producten:hover .DropdownPrivetraining {
  top: 45px;
  opacity: 1;
  visibility: visible;
}
#Producten:hover .DropdownTrajectopmaat {
  top: 90px;
  opacity: 1;
  visibility: visible;
}

#Trainers:hover .DropdownPieter {
  top: 0;
  opacity: 1;
  visibility: visible;
}
#Trainers:hover .DropdownLaura {
  top: 45px;
  opacity: 1;
  visibility: visible;
}
#Trainers:hover .DropdownYannick {
  top: 90px;
  opacity: 1;
  visibility: visible;
}
#Trainers:hover .DropdownSander {
  top: 135px;
  opacity: 1;
  visibility: visible;
}
#Trainers:hover .DropdownNick {
  top: 180px;
  opacity: 1;
  visibility: visible;
}

#Contact:hover .DropdownContactform {
  top: 0;
  opacity: 1;
  visibility: visible;
}
#Contact:hover .DropdownFacebook {
  top: 45px;
  opacity: 1;
  visibility: visible;
}
#Contact:hover .DropdownInsta {
  top: 90px;
  opacity: 1;
  visibility: visible;
}

/* 下拉菜单背景色保持和主菜单一致 */
.DropdownGroepstraining, .DropdownPrivetraining, .DropdownTrajectopmaat {
  background-color: #f44336;
}
.DropdownPieter, .DropdownLaura, .DropdownYannick, .DropdownSander, .DropdownNick {
  background-color: #555;
}
.DropdownContactform, .DropdownFacebook, .DropdownInsta {
  background-color: purple;
}

HTML 部分（无需修改，保留原代码即可）

<nav>
  <div id="mySidenav" class="sidenav">
    <div id="Home"><a href="Default.aspx" class="Home">Home</a></div>
    <div id="Info"><a href="Info.aspx" class="Info">Info</a></div>
    <div id="Producten"><a href="Producten.aspx" class="Producten">Producten</a>
      <a href="Groepstraining.aspx" class="DropdownGroepstraining">Groepstraining</a>
      <a href="Privetraining.aspx" class="DropdownPrivetraining">Privétraining</a>
      <a href="TrajectOpMaat.aspx" class="DropdownTrajectopmaat">Traject op maat</a>
    </div>
    <div id="Trainers"><a href="Trainers.aspx" class="Trainers">Trainers</a>
      <a href="PieterGeerts.aspx" class="DropdownPieter">Pieter Geerts</a>
      <a href="LauraVanBaekel.aspx" class="DropdownLaura">Laura Van Baekel</a>
      <a href="YannickMaes.aspx" class="DropdownYannick">Yannick Maes</a>
      <a href="SanderGeerts.aspx" class="DropdownSander">Sander Geerts</a>
      <a href="NickVanCamp.aspx" class="DropdownNick">Nick Van Camp</a>
    </div>
    <div id="Contact"><a href="Contact.aspx" class="Contact">Contact</a>
      <a href="Contactformulier.aspx" class="DropdownContactform">Contactformulier</a>
      <a href="https://www.facebook.com/ttkempen/" target="_blank" class="DropdownFacebook"><img id="navfacebooklogo" src="images/facebooklogo.png" />Facebook</a>
      <a href="https://www.instagram.com/tt_kempen/?hl=nl" target="_blank" class="DropdownInsta"><img id="navinstagramlogo" src="images/instagramlogo.png" />Instagram</a>
    </div>
    <div id="FAQ"><a href="FAQ.aspx" class="FAQ">FAQ</a></div>
  </div>
</nav>

关键修改点说明

父容器绑定hover：把原来的#Producten a:hover改成#Producten:hover a，这样只要鼠标在父容器（包括主链接和下拉）上，主链接就保持显示状态。
消除下拉空隙：把下拉的margin-left:140px改成left:100%，让下拉刚好贴在主链接右侧，鼠标移过去不会经过空白区域导致hover中断。
过渡效果优化：用opacity和visibility替代display:none，让下拉显示/隐藏更平滑，同时避免display属性无法过渡的问题。
父容器定位与高度：给父容器设置position:relative和固定高度，确保下拉的定位参考正确，且hover范围覆盖主链接的区域。