如何通过悬停而不单击[重复]来显示下拉菜单和子菜单项

Posted 2023-03-06

【中文标题】如何通过悬停而不单击[重复]来显示下拉菜单和子菜单项

【英文标题】：How to display dropdown menu and submenu items by hover not clicking [duplicate]

【发布时间】：2018-11-04 01:12:22

【问题描述】：

如何在悬停而不是点击时显示下拉菜单项

这里我有关于菜单下拉菜单，它在单击时显示，但我想让它在悬停时显示菜单项。同样的事情也应该是子菜单项。如果我遗漏了什么，请告诉我

html

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="./" class="navbar-brand">Bootstrap Menu</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Mission</a></li>
            <li><a href="#">Vision</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Products</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li class="active">
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

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

https://codepen.io/ericagulto/pen/KgdyqJ

【问题讨论】：

我发现这个***.com/questions/8878033/… 似乎回答了你的问题

我添加了.dropdown:hover .dropdown-menu display: block; 及其工作。只是为了确认...这是我添加到样式表中的唯一更改

【参考方案1】：

将您的下拉列表 <li> 更改为此

<li class="dropdown">
  <a class="dropbtn">About <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="#">Mission</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Careers</a></li>
  </ul>
</li>

并将其添加到您的 CSS 中

.dropdown 
  position: relative;
  display: inline-block;

.dropdown-menu 
  display: none;
  position: absolute;
  z-index: 1;

.dropdown:hover .dropdown-menu 
  display: block;

CodePen