如何让Bootstrap导航栏下拉父项可点击且保留悬停下拉菜单

纯CSS应急方案（不用改原有HTML，不用jQuery） #

保留原有的data-toggle="dropdown"属性别乱动，直接加这段CSS到你的样式文件里就行：

.dropdown-toggle {
  position: relative;
}
.dropdown-toggle .caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
/* 核心逻辑：默认只让箭头触发下拉，文字区域可点击跳转 */
.dropdown-toggle {
  pointer-events: none;
}
.dropdown-toggle .caret {
  pointer-events: auto;
}
/* 下拉展开后，整个链接都能点击跳转 */
.dropdown.open .dropdown-toggle {
  pointer-events: auto;
}

原理很简单：默认把父链接的点击事件禁用，只让下拉箭头响应点击触发下拉；当下拉菜单展开后，再恢复父链接的点击权限，这样不管点文字还是箭头都能跳转，同时下拉功能正常。

更简单的HTML小改动方案（5分钟搞定） #

如果不想写CSS，直接给父项的文字部分单独加个点击跳转的逻辑，不用动导航其他代码：

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown">
    <!-- 给文字加onclick跳转，箭头负责触发下拉 -->
    <span onclick="window.location.href='dispositivi.html'">Dispositivi</span>
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- 你的子菜单选项 -->
  </ul>
</li>

这样用户点文字直接跳转到dispositivi.html，点箭头展开下拉菜单，完全满足需求，而且不会破坏原有导航的其他功能。

内容的提问来源于stack exchange，提问作者Cri86-Titanium