带有Bootstrap 4的导航栏中的悬停问题
16lz
2021-01-22
I have created a navbar with Bootstrap 4. When I click on a dropdown menu link, it opens and remains open — when I hover on another dropdown link, they overlap.
我创建了一个带有Bootstrap 4的导航栏。当我点击下拉菜单链接时，它会打开并保持打开状态 - 当我将鼠标悬停在另一个下拉链接上时，它们会重叠。
I want it such that a dropdown link will be closed if I hover on another dropdown link.
我希望它如果我将鼠标悬停在另一个下拉链接上，将关闭下拉链接。
Here is the code of my navbar dropdown:
这是我的导航栏下拉列表的代码：
.dropdown:hover>.dropdown-menu {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="../../js/function.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font/css/font-awesome.css">
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>更多相关文章
- 如何在页面上获得带有javascript的特定单词的链接
- Js中获取超链接里面传递的参数值
- element.replaceWith在自定义指令的链接中仅在第一次调用时工作
- 使用nasm和ld汇编/链接问题
- 解决nfs链接开发板出现：nfs:server is not responding,still tryi
- 我应该在哪里添加Yocto位烤任务来创建工作文件夹符号链接?
- Linux中动态链接库总结
- 删除目录软链接注意事项
- 求GridControl_11.1.0.1.0_Linux_x86-64_1of3 的下载链接最好是