问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？

社区维基
1
新手上路，请多包涵

我正在一个网站上工作，我想在 Bootstrap 4.1 中悬停时创建一个下拉子菜单

我用来在鼠标悬停时创建下拉菜单的 HTML 代码是：

 <div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      main menu
    </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">A</a>
        <a class="dropdown-item" href="#">B</a>
        <a class="dropdown-item" href="#">C</a>
        <a class="dropdown-item" href="#">D</a>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

  </ul>
</div>

问题陈述：

我想知道我应该在上面的代码中进行哪些更改，以便在 D 悬停时；显示下拉项 E、F、G、H 。

原文由 flash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsshoverbootstrap-4
阅读 414
1 个回答
得票最新
社区维基
1

这可能对你有帮助……

 .dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown-item:hover>.dropdown-menu {
  display: block;
}
ul li{
list-style-type:none;
display: inline;
}

.navbar-nav .nav-link{display:inline-block;}

.ml-auto {display:inline-block!important;}

.dropdown>.dropdown-toggle:active {
  pointer-events: none;
}

 <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <title>Dropdown submenu on hover</title>
</head>

<body>

  <div class="navbar-collapse text-center" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Main menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">A</a>
          <a class="dropdown-item" href="#">B</a>
          <a class="dropdown-item" href="#">C</a>
          <a class="dropdown-item nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          D
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">E</a>
          <a class="dropdown-item" href="#">F</a>
          <a class="dropdown-item" href="#">G</a>
          <a class="dropdown-item" href="#">H</a>
        </div>
        </div>
      </li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

</html>

原文由 Viira 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题