我在自定义引导程序的下拉菜单时遇到问题，当我将导航项悬停在导航项上时，有什么方法可以实现，导航项将自动设置白色的背景色。为了提供更多细节，我想实现此下拉菜单概念。
这是我要在下拉菜单中实现的示例图像。
因此，目前我已经创建了一个导航栏，但是我不知道如何实现将背景颜色设置为引导程序4的导航链接。
我将与大家分享我制作的示例代码。
.nav-item.dropdown:hover {
background-color: #FFF;
}<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="min-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>最佳答案
您可以使用:hover属性将background-color选择器添加到所需的项目。您还需要从padding-right:50px标记移至某些<a>，并将其更改为父元素上的margin-right:50px。您可以将min-height:56px从.navbar元素中删除，因为`.nav-items垂直居中，否则会有间隙。
.navbar {
padding-top:0px;
padding-bottom:0px;
}
.nav-item {
padding-top:8px;
padding-bottom:8px;
margin-right:50px;
}
.nav-item:hover {
background-color: white;
}
.nav-item:hover a {
color:gray !important;
}
Full Example Here
关于html - 我如何自定义Bootstrap 4的下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57361752/