Avatar of Howard Bash
Howard Bash
Flag for United States of America

asked on 

Hover Gone

I have a web page with styling on it and I was requested to not have the visited color of a submenu anchor change color.  I thought I did indeed make the update.  But now,  once a link is clicked,  that link no longer changes color on the hover.

Here is the HTML
<div class="container">
	<div class="HCPmenu-container">
		<div class="HCPitem">
			<a href="#">Corporate Comm.</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_blank">Memos</a>
						<a href="#" target="_blank">PressReleases</a>
						<a href="#" target="_blank">The Next Page</a>
						<a href="#" target="_blank">SomeCompany News</a>
					</div><!-- Close Column Div -->
					<div class="col_1 HCPsub-menu-item">
						<a href="#" target="_self">Corporate Information</a>
						<a href="#" target="_self">SomeCompany Gives Back</a>
						<a href="#" target="_self">Company History</a>
						<a href="#" target="_blank">The History of SomeCompany</a>
					</div><!-- Close Column Div -->
					<div class="col_2 HCPsub-menu-item">
						<a href="#" target="_self">Record Management</a>
						<a href="#" target="_self">Research and Reference Services</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">Human Resources</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_self">US Human Resources</a>
						<a href="#" target="_self">Canada Human Resources</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">IT</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_self">Policies and User Guides</a>
						<a href="#" target="_self">IT Security</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">Corporate Services</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_self">City1</a>
						<a href="#" target="_self">City1</a>
						<a href="#" target="_self">City1</a>
						<a href="#" target="_self">City1</a>
					</div><!-- Close Column Div -->
					<div class="col_1 HCPsub-menu-item">
						<a href="#" target="_self">Canada</a>
						<a href="#" target="_blank">Visitor's Registration</a>
						<a href="#" target="_blank">iOffice</a>
						<a href="#" target="_blank">Purchasing</a>
					</div><!-- Close Column Div -->
					<div class="col_2 HCPsub-menu-item">
						<a href="#" target="_self">Corporate Travel</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">Sales Connect</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
	</div><!-- Close menu-container div -->
</div><!-- Close container div -->

Open in new window


And here is the CSS
<style type="text/css">
a , a:hover{
  text-decoration: none!important;
}

* {
  box-sizing: border-box;
}

.HCPmenu-container .HCPitem {
  float: left;
}

.HCPmenu-container .HCPitem > a {
  margin-top:-16px;
  padding-left:15px;
  padding-right:15px;
}

.HCPmenu-container .HCPitem > a {
  padding-top: 15px;  
  padding-bottom: 15px;
}

.HCPmenu-container:after {
  display: table;
  content: " ";
  clear: both;
}
.HCPitem:hover .HCPsub-menu {
  display: block;
  border-width:1px;
  border-color:green;
}
.HCPitem > a {
  color:black;
  display: block;
  height: 100%;
}
.HCPitem:hover > a {
  background: white;
  color:#0c7ff4;
}
.HCPsub-menu {
  background: #fff;
  display: none;
  position: absolute;
  padding-top: 3px;
  z-index: 10 !important;  
  box-shadow: 3px 3px 3px #d1d4d9;
}
.HCPsub-menu-item {
  float:left;
  padding:5px 25px 5px 5px; 
  height:auto;
  width:auto;
}
.HCPsub-menu-item a {
  display: block;
  margin-bottom:15px;
}

.HCPsub-menu-item > a:hover {
	color:#0c7ff4 !important;	
}

.HCPsub-menu-item > a:link {
	color:#a2a3a5;
}

.HCPsub-menu-item > a:visited {
	color:#a2a3a5 !important;
}

</style>

Open in new window



Thanks,
Howard
CSSHTML

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon