How can i customize the dropdown menu of bootstrap 4

Question

I have problem customizing the dropdown menu of bootstrap, is there way to achieve when i hover the nav-item the nav item will automatically set a background color of white. to give more details I want to achieve this dropdown concept.

This is the sample image that I want to achieve on my dropdown.

So currently I already create a navbar but I don't know how can i achieve that setting background-color to the navlink of bootstrap 4.

I will share to you guys my sample code that I made.

  .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> &nbsp;&nbsp;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> &nbsp;&nbsp;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> &nbsp;&nbsp; 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"> &nbsp;&nbsp; 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"> &nbsp;&nbsp; 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> 

Answer 1

You can add a :hover selector to the item you want with a background-color attribute. You also need to move around some of the padding-right:50px from the <a> tags and change them to margin-right:50px on the parent element. You can remove the min-height:56px from the .navbar element since the `.nav-items are centered vertically otherwise there will be a gap.

.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

Answer 2

Are u expecting like this:

 .navbar{ padding:0px !important; } a#navbarDropdown:hover { background-color: #FFF; color: gray !important; height: 100%; } .nav-item{ min-height:56px; } .nav-link{ line-height:56px; } 

 <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> &nbsp;&nbsp;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> &nbsp;&nbsp;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> &nbsp;&nbsp; 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"> &nbsp;&nbsp; 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"> &nbsp;&nbsp; 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> 

Answer 3

You will need to remove all of the inline styles as there are overriding the stylesheets

.navbar.navbar-light.bg-dark li a.nav-link{
     color:white;
}

.navbar.navbar-light.bg-dark li:hover a.nav-link{
     color:#00A0DF;!important
}

so instead of having

<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>

use

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"  role="button" data- 
toggle="dropdown" aria-haspopup="true" aria-expanded="false">MEMBERSHIP</a>