jquery - 如果我的光标指向导航链接，如何自动删除下拉菜单
问题描述
我对自定义引导程序 4 的下拉菜单有疑问，如果用户悬停不同的导航链接，我需要在其中显示下拉菜单内容的模块。有没有办法在下拉列表中显示内容。如果我悬停它。？我找到了一些与我的问题相关的答案，但在我这边不起作用，他们给出了使用 css 或 jquery 的建议。
我将与你们分享我的 html 引导导航栏。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-dark" style="height: 56px; background-color:#575A5D !important; border-color:#575A5D !important; position:fixed; width: 100%; z-index:3;">
<button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" style="color:white !important;" data-target=".navbar1and2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color:white !important;"></span>
</button>
<div class="collapse navbar-collapse navbar1and2" id="navbarSupportedContent2">
<ul class="navbar-nav mr-auto" >
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEMBERSHIP
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">Benefits For</p>
<div style="border-right-style: dotted; height:auto; "></div>
<a href="./physician_membership.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left; border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important; "><i class="fas fa-arrow-alt-circle-right"></i> Physician</a>
<br><br>
<a href="./residents.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left; border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Residents & Fellows-in-Training</a>
<br><br>
<a href="./medical_students.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left;border-radius: border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Students</a>
<br><br>
<a href="./international_membership.php" class="btn btn-primary btn-lg form-control" style="border-color:#4AAE9C; background-color:#4AAE9C; border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> International</a>
<br><br>
<a href="./affiliate_membership.php" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Affiliate</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">Become a Fellow</p>
<ul style="list-style-type: circle; ">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Interested in becoming fellow?</a></li><br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Nominate a fellow <i class="fas fa-location-arrow"></i></a></li>
</ul>
</div>
<div class="col-md-4" style=" position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">For Members</p>
<ul style="list-style-type: none;">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="far fa-gem"></i> Pay Dues <i class="fas fa-location-arrow"></i></a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-th-list"></i> Update Account <i class="fas fa-location-arrow"></i></a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-money-check"></i> Check Orders <i class="fas fa-location-arrow"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CME & MOC
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">UNDERSTANDING MOC</p>
<p>PSMID offers a number of resources to help members make sense of the MOC requirements and earn points.</p>
<a href="" class="btn btn-primary btn-lg form-control" style="border-color:#007BFF; background-color:#007BFF; border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Understand MOC Requirements</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#007BFF; background-color:#007BFF;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Earn MOC Points</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:30px; color:#000">Industry Leading Tools & Resources</p>
<ul style="list-style-type: none; ">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"> MKSAP 18</a></li><br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/annals_icon.png" class="img-fluid"> Annals of IM </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/im2020-57x57.png" class="img-fluid"> Internal Medicine Meeting </a></li>
</ul>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">CME</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">MOC</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Certification Preperation</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Online Learning Center</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEETING & COURCES
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/im2020-logo-350x115.png" class="img-fluid">
<br><br>
<p style="font-size:18px; color:#8e908f;">The most comprehensive meeting in Internal Medicine.</p>
<hr>
<p style="font-size:27px; color:#8e908f;">Los Angeles,CA April 23-25, 2020</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> INTERNAL MEDICINE MEETING 2020</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:30px; color:#000">Upcoming Internal Medicine Board Review Courses</p>
<p style="font-size:20px; color:#8e908f">Prepare for the Certification and Maintenance of Certification (MOC) Exam with an PSMID review course.</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> BOARD CERTIFICATION REVIEW COURCES</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> MOC EXAM PREP COURCES</a>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Internal Medicine Meeting</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">US Chapter Meetings</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">International Chapter Meetings</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Courses & Recordings</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Focused Topics</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CLINICAL INFORMATION
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<center>
<br>
<div style="line-height: 5px;">
<p style="font-size:30px;">PSMID Clinical Search</p>
<h5 style="font-size:20px;">Treating a patient? Researching a topic? Get answers now.</h5>
<div class="input-group col-md-7">
<input type="text" class="form-control" style="position: relative; top:7px; font-size: 15px; " placeholder="Search Clinical Information" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend" style="position: relative; top:7px; ">
<span class="input-group-text" id="basic-addon1" style="background-color: #00A0DF !important; border-color:#00A0DF; color:white; "><i class="fas fa-search" style="font-size:15px;"></i></span>
</div>
</div>
<br><br>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="./Assets/logo-annals3.png" class="img-fluid">
<br><br><br><br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT ANNALS</a>
<br><br><br><br>
<a href="" style="font-size:15px; text-decoration: none; color:#00A0DF;">LEARN MORE</a>
</div>
<div class="col-md-4">
<img src="./Assets/logo-annals3.png" class="img-fluid">
<br><br><br><br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT MKSAP 18</a>
<br><br><br><br>
<a href="" style="font-size:15px; text-decoration: none; color:#00A0DF;">LEARN MORE</a>
</div>
<div class="col-md-4">
<img src="./Assets/dmp_logo_v3.png" class="img-fluid">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT DYNAMED PLUS</a>
</div>
</div>
</div>
</div>
</center>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Clinical Guidelines & Recommendations</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Performance Measures</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Journals & Publications</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Clinical Resources & Products</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">High Value Care</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Ethics & Professionalism</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- <li class="nav-item " style="padding-right:60px; color:white;">
<a class="nav-link" href="#" >CLINICAL INFORMATION</a>
</li> -->
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PRACTICE RESOURCES
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:25px; color:#8e908f">Medicare</p>
<p style="font-size:18px;">Ensure payment and avoid policy violations. Plus, new resources to help you navigate the Medicare Access and CHIP Reauthorization Act of 2015 (MACRA).</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicare Resources</a>
</div>
<div class="col-md-3" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:25px; color:#8e908f">Office Forms</p>
<p style="font-size:18px;">Access helpful forms developed by a variety of sources for patient charts, logs, information sheets, office signs, and use by practice administration.</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Office Forms</a>
</div>
<div class="col-md-6" style=" position: relative; top:10px;">
<div class="row">
<div class="col-md-6">
<p style="font-size:17px; color:#8e908f">QUICK LINKS</p>
<ul style="list-style-type: none;">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> QPP/MACRA </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i>Physician & Practice Timeline </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> Coding</a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Educator Resources</a></li>
</ul>
</div>
<div class="col-md-6">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">CME</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">MOC</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Certification Preperation</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Online Learning Center</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ADVOCACY
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:auto; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<br>
<div style="line-height: 5px;">
<p style="font-size:30px;">Where We Stand</p>
<h5 style="font-size:20px;">PSMID advocates on behalf on internists and their patients on a number of timely issues. Learn about where PSMID stands on the following areas:</h5>
</div>
<br>
<div class="row">
<div class="col-md-6">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Access to Care</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Patients Before Paperwork</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicare and the Quality Payment Program</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicaid Reform</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Public Health</a>
</div>
<div class="col-md-6">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Physician Workforce and Team Based Care</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Women in Medicine</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Health Information Technology</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Liability Reform</a>
</div>
</div>
<br>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Where We Stand</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">PSMID Advocate Newsletter</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">State Health Policy</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Advocacy in Action</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Current Public Policy Papers</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">PSMID Policies & Recommendations</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item " style="color:white !important;">
<a class="nav-link" href="#" style=""><i class="fas fa-shopping-cart"></i> STORE</a>
</li>
</ul>
</div>
</nav>JS：
$('#navbarDropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
解决方案
通过 JQuery 解决
而不是做.fadeIn / .fadeOut。
只需使用.toggleClass然后在 和 上切换类“显示.nav-item” .dropdown-menu。
请参阅下面的代码。
$('.nav-item').hover(
function() {
$('.nav-item.show').stop(true, true).delay(200).removeClass("show");
$('.nav-item').find('.dropdown-menu.show').stop(true, true).delay(200).removeClass("show");
$(this).stop(true, true).delay(200).toggleClass("show");
$(this).find('.dropdown-menu').stop(true, true).delay(200).toggleClass("show");
}, function() {
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-dark" style="height: 56px; background-color:#575A5D !important; border-color:#575A5D !important; position:fixed; width: 100%; z-index:3;">
<button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" style="color:white !important;" data-target=".navbar1and2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color:white !important;"></span>
</button>
<div class="collapse navbar-collapse navbar1and2" id="navbarSupportedContent2">
<ul class="navbar-nav mr-auto" >
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEMBERSHIP
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">Benefits For</p>
<div style="border-right-style: dotted; height:auto; "></div>
<a href="./physician_membership.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left; border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important; "><i class="fas fa-arrow-alt-circle-right"></i> Physician</a>
<br><br>
<a href="./residents.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left; border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Residents & Fellows-in-Training</a>
<br><br>
<a href="./medical_students.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left;border-radius: border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Students</a>
<br><br>
<a href="./international_membership.php" class="btn btn-primary btn-lg form-control" style="border-color:#4AAE9C; background-color:#4AAE9C; border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> International</a>
<br><br>
<a href="./affiliate_membership.php" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Affiliate</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">Become a Fellow</p>
<ul style="list-style-type: circle; ">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Interested in becoming fellow?</a></li><br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Nominate a fellow <i class="fas fa-location-arrow"></i></a></li>
</ul>
</div>
<div class="col-md-4" style=" position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">For Members</p>
<ul style="list-style-type: none;">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="far fa-gem"></i> Pay Dues <i class="fas fa-location-arrow"></i></a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-th-list"></i> Update Account <i class="fas fa-location-arrow"></i></a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-money-check"></i> Check Orders <i class="fas fa-location-arrow"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CME & MOC
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">UNDERSTANDING MOC</p>
<p>PSMID offers a number of resources to help members make sense of the MOC requirements and earn points.</p>
<a href="" class="btn btn-primary btn-lg form-control" style="border-color:#007BFF; background-color:#007BFF; border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Understand MOC Requirements</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#007BFF; background-color:#007BFF;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Earn MOC Points</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:30px; color:#000">Industry Leading Tools & Resources</p>
<ul style="list-style-type: none; ">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"> MKSAP 18</a></li><br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/annals_icon.png" class="img-fluid"> Annals of IM </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/im2020-57x57.png" class="img-fluid"> Internal Medicine Meeting </a></li>
</ul>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">CME</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">MOC</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Certification Preperation</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Online Learning Center</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEETING & COURCES
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/im2020-logo-350x115.png" class="img-fluid">
<br><br>
<p style="font-size:18px; color:#8e908f;">The most comprehensive meeting in Internal Medicine.</p>
<hr>
<p style="font-size:27px; color:#8e908f;">Los Angeles,CA April 23-25, 2020</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> INTERNAL MEDICINE MEETING 2020</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:30px; color:#000">Upcoming Internal Medicine Board Review Courses</p>
<p style="font-size:20px; color:#8e908f">Prepare for the Certification and Maintenance of Certification (MOC) Exam with an PSMID review course.</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> BOARD CERTIFICATION REVIEW COURCES</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> MOC EXAM PREP COURCES</a>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Internal Medicine Meeting</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">US Chapter Meetings</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">International Chapter Meetings</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Courses & Recordings</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Focused Topics</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CLINICAL INFORMATION
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<center>
<br>
<div style="line-height: 5px;">
<p style="font-size:30px;">PSMID Clinical Search</p>
<h5 style="font-size:20px;">Treating a patient? Researching a topic? Get answers now.</h5>
<div class="input-group col-md-7">
<input type="text" class="form-control" style="position: relative; top:7px; font-size: 15px; " placeholder="Search Clinical Information" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend" style="position: relative; top:7px; ">
<span class="input-group-text" id="basic-addon1" style="background-color: #00A0DF !important; border-color:#00A0DF; color:white; "><i class="fas fa-search" style="font-size:15px;"></i></span>
</div>
</div>
<br><br>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="./Assets/logo-annals3.png" class="img-fluid">
<br><br><br><br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT ANNALS</a>
<br><br><br><br>
<a href="" style="font-size:15px; text-decoration: none; color:#00A0DF;">LEARN MORE</a>
</div>
<div class="col-md-4">
<img src="./Assets/logo-annals3.png" class="img-fluid">
<br><br><br><br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT MKSAP 18</a>
<br><br><br><br>
<a href="" style="font-size:15px; text-decoration: none; color:#00A0DF;">LEARN MORE</a>
</div>
<div class="col-md-4">
<img src="./Assets/dmp_logo_v3.png" class="img-fluid">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT DYNAMED PLUS</a>
</div>
</div>
</div>
</div>
</center>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Clinical Guidelines & Recommendations</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Performance Measures</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Journals & Publications</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Clinical Resources & Products</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">High Value Care</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Ethics & Professionalism</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- <li class="nav-item " style="padding-right:60px; color:white;">
<a class="nav-link" href="#" >CLINICAL INFORMATION</a>
</li> -->
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PRACTICE RESOURCES
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:25px; color:#8e908f">Medicare</p>
<p style="font-size:18px;">Ensure payment and avoid policy violations. Plus, new resources to help you navigate the Medicare Access and CHIP Reauthorization Act of 2015 (MACRA).</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicare Resources</a>
</div>
<div class="col-md-3" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:25px; color:#8e908f">Office Forms</p>
<p style="font-size:18px;">Access helpful forms developed by a variety of sources for patient charts, logs, information sheets, office signs, and use by practice administration.</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Office Forms</a>
</div>
<div class="col-md-6" style=" position: relative; top:10px;">
<div class="row">
<div class="col-md-6">
<p style="font-size:17px; color:#8e908f">QUICK LINKS</p>
<ul style="list-style-type: none;">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> QPP/MACRA </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i>Physician & Practice Timeline </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> Coding</a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Educator Resources</a></li>
</ul>
</div>
<div class="col-md-6">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">CME</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">MOC</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Certification Preperation</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Online Learning Center</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" style="padding-right:50px; color:white;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ADVOCACY
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:auto; background-color:#f3f3f3; border-color:#f3f3f3;">
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<br>
<div style="line-height: 5px;">
<p style="font-size:30px;">Where We Stand</p>
<h5 style="font-size:20px;">PSMID advocates on behalf on internists and their patients on a number of timely issues. Learn about where PSMID stands on the following areas:</h5>
</div>
<br>
<div class="row">
<div class="col-md-6">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Access to Care</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Patients Before Paperwork</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicare and the Quality Payment Program</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicaid Reform</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Public Health</a>
</div>
<div class="col-md-6">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Physician Workforce and Team Based Care</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Women in Medicine</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Health Information Technology</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Liability Reform</a>
</div>
</div>
<br>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Where We Stand</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">PSMID Advocate Newsletter</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">State Health Policy</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Advocacy in Action</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Current Public Policy Papers</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">PSMID Policies & Recommendations</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item " style="color:white !important;">
<a class="nav-link" href="#" style=""><i class="fas fa-shopping-cart"></i> STORE</a>
</li>
</ul>
</div>
</nav>通过 CSS
只需在您的声明下方添加样式，bootstrap.css这样它将覆盖引导程序的样式。
有关实时代码，请参阅CodePen 链接。
.navbar{ 填充：0; 高度：未设置；}
.nav-item{
padding: 10px;
}
.nav-item:hover .dropdown-menu{
display:block;
background:red;
opacity:1;
}
</style>
我建议您使用 JQuery 解决方案，因为它不会对引导程序的样式产生太大影响，而不是使用会导致修改和覆盖引导程序样式的 CSS 解决方案。
推荐阅读
- java - 如何在 Java 中创建自己的自定义 SSO（单点登录）？
- php - 在 HTML 表单操作之前运行 PHP 提交代码以设置 SESSION 变量
- java - H2 数据库：“U”列必须在 GROUP BY 列表中；SQL 语句
- javascript - Web 组件之间的通信
- python - Python 规范化深度嵌套的 JSON
- physics - 密度方程
- datetime - Kotlin 中的日期和时间
- firebase - 从 GCP Console 部署 Cloud Firestore 触发器功能
- python - 使用 FuncAnimation 为 Seaborn 气泡图制作动画
- python - 如何在 Python 中打开名称中包含或以 # 开头的模块？