如何实现下拉菜单及子菜单hover触发而非点击触发

我来帮你搞定这个问题——把Bootstrap的点击式下拉改成鼠标悬停触发其实很简单，只需要添加一些CSS规则，还能兼顾移动端的交互体验，下面是具体的实现步骤：

一、核心CSS修改：让hover时显示下拉菜单 #

Bootstrap的下拉菜单默认是通过JS给父元素添加.open类来控制显示的，我们可以用CSS的:hover伪类直接实现悬停触发，同时只在桌面端生效（毕竟移动端没有hover操作）：

/* 仅在桌面端启用悬停下拉 */
@media (min-width: 768px) {
  /* 悬停时直接显示子菜单 */
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* 去掉默认的2px上边距，避免显示时的闪烁感 */
  }
}

这段代码的作用是：当屏幕宽度≥768px（桌面端）时，鼠标悬停在.dropdown菜单项上，自动显示对应的.dropdown-menu子菜单。

二、可选：添加平滑过渡动画 #

如果想要下拉菜单显示/隐藏时更顺滑，可以替换上面的CSS为以下代码，用透明度和可见性的过渡替代生硬的display切换：

@media (min-width: 768px) {
  /* 默认让菜单透明且不可见 */
  .navbar-nav .dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* 悬停时切换为可见状态 */
  .navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}

这样菜单会有0.3秒的淡入淡出效果，交互体验更好。

三、优化细节：保留移动端点击功能 #

你的当前代码里，.dropdown-toggle标签有data-toggle="dropdown"属性，这是Bootstrap用来触发点击下拉的JS标识。建议保留这个属性，这样在屏幕宽度<768px的移动端，用户仍然可以通过点击打开下拉菜单，完美兼顾桌面和移动端的使用场景。

如果完全不需要点击触发（仅桌面端使用），也可以去掉这个属性：

<!-- 修改前 -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>

<!-- 修改后 -->
<a href="#" class="dropdown-toggle">About <b class="caret"></b></a>

完整修改后的CSS代码 #

把新增的CSS规则添加到你现有CSS的末尾即可，下面是完整的代码：

@import 'https://fonts.googleapis.com/css?family=Montserrat|Open+Sans';
.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase
}
.navbar .nav {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.2rem
}
.navbar-inverse {
  background-color: #003300
}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
  background-color: #002200
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
  background-color: #003300
}
.dropdown-menu {
  background-color: #006B00
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
  background-color: #002200
}
.navbar-inverse {
  background-image: none;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
  background-image: none;
}
.navbar-inverse {
  border-color: #003300
}
.navbar-inverse .navbar-brand {
  color: #FFFFFF
}
.navbar-inverse .navbar-brand:hover {
  color: #FFCC00
}
.navbar-inverse .navbar-nav>li>a {
  color: #FFFFFF
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
  color: #FFCC00
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
  color: #FFCC00
}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
  color: #FFCC00
}
.dropdown-menu>li>a {
  color: #FFFFFF
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
  color: #FFCC00
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-top-color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-top-color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-bottom-color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #FFFFFF
}

/* 新增的悬停下拉规则 */
@media (min-width: 768px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  
  /* 可选：添加平滑过渡动画 */
  .navbar-nav .dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}

这样修改后，你的About下拉菜单（以及后续添加的其他子菜单）都会在鼠标悬停时自动展开，同时不影响移动端的点击触发功能，完全符合你的需求~

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