如果悬停光标不在元素中,是否可以保持导航链接的颜色?

时间:2019-08-06 15:18:28

标签: html css bootstrap-4

如果我的悬停光标不在元素中,我会遇到颜色变回白色的问题。如果悬停光标不在悬停元素中,是否有办法使导航链接颜色保持不变?我将向大家展示我今天的输出图像。目前,我的导航栏使用引导程序。

光标不在元素中

Cursor not in the element

我想使目标输出看起来像这样。

Target output

我将与大家分享我的小提琴文件,以了解更多详细信息。

.dropdown:hover {
  background-color: #f3f3f3;
  border-top:5px solid #00BC54;
  color:black !important;

}

.dropdown a:hover {
  color:grey !important;
}

.nav-item:hover a {
  /*color:gray !important;*/
}

#navbarDropdown:hover {
  color:grey !important;
}

#navbarDropdown:focus {
  color:grey !important;
}
.navbar {
  padding-top:0px;
  padding-bottom:0px;
}


.nav-item {
/*  padding-top:5px;
  padding-bottom:8px;
  margin-right:50px;*/
   padding-top:10px;
   margin-right:60px;
  padding-bottom:8px;
}
.nav-item #navbarDropdown {
  font-size:13px;
  font-weight: 500;
  letter-spacing: 1px;
  color:#F9F9F9;

}

li.nav-item:hover div.dropdown-menu,
div.dropdown-menu:hover {
    display: block;
    opacity: 1;

    position: absolute;
    z-index: 100000;

}

.nav-item #navbarDropdown:hover {
  color:#575a5d !important;
}

.nav-item #navbarDropdown:not(:hover) {
    color:white;
}
.navbar-expand-sm .navbar-nav .nav-link  {
  font-weight:400;
}
<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 custom-navbar-fixed" style="min-height: 56px; background-color:#575a5d !important; border-color:#575a5d !important; position:fixed; width: 100%; z-index:3;">
	<br><br>
	<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" 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:#F9F9F9; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); border-color:white; position: absolute; top:50px;">
	           <div class="container-fluid">
	           		<div class="row">
	           			<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:20px;">
		           			<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:20px;">
		           			<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:20px;">
		           			<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>
	           <br><br>
	        </div>
	      </li>
	      <li class="nav-item dropdown position-static">
	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"   role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	          CME & MOC
	        </a>
	       
	    	<div class="dropdown-menu fade w-100 cme" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
	           <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;">
		           			<br>
		           			<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"   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:#F9F9F9; border-color:white; position:absolute; top:50px;">
	           <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" 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:#F9F9F9; border-color:white; position:absolute; top:50px;">
	           <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"  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:#F9F9F9; border-color:white; position:absolute; top:50px;">
	           <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"  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:400; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
	           <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 " >
	        <a class="nav-link" href="#" style="color:white !important;"><i class="fas fa-shopping-cart"></i> STORE</a>
	      </li>
	  	</ul>
    </div>
</nav>

1 个答案:

答案 0 :(得分:2)

尝试使用此选择器:

.dropdown:hover > a {
    color: #575a5d !important;
}

并摆脱a标记的悬停样式。

由于下拉菜单不是标签的子菜单,因此,一旦向下移动鼠标,您就停止在标签上徘徊。

相反,由于下拉菜单是.dropdown li的子级,因此,只要您将鼠标悬停在.dropdown元素或其任何子级中,就可以将标签定位为目标。