CSS Hover Link: Creating Hover color stay, if connection is active

I’m working on a website using PHP, HTML and CSS. Currently in my navigation bar, i’ve set the background color to be grey. When the user hovers over the navigation bar, each link gets a blue background, however when I click the link, the background color goes back to grey. How do I make the hover color blue stay if that particular link is active.

This is the code for my navigation bar.

<tr>
<td width="800" height="54">
<div id="nav" >
<ax><b><font face="Arial" ><a style="text-decoration: none; color:#303030" href="index.php" >HOME</a></font></b></ax>
<bx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="edituser.php?own=y">IT</a></font></b></bx>
<cx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="newsevents.php">HUMAN RESOURCE</a></font></b></cx>
<dx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="industries.php">PROCUREMENT</a></font></b></dx>
<ex><b><font face="arial" size="1"><a style="text-decoration: none; color:#303030" href="http://www.csmphilippines.com/aboutus.html">FINANCE</a></font></b></ex>
<fx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="hact.php">HACT</a></font></b></fx>
</div>
</td>

This is the code for my CSS

#nav {
text-decoration:none;
padding-bottom:10px;
border-bottom:none;
width:
}

#nav ax {
display:inline;
padding:15px;
padding-left:31px;
padding-right:28px;
background-color:#ececec;
text-decoration:none;
}

#nav bx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav cx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav dx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav ex {
display:inline;
padding:15px;
padding-left:53px;
padding-right:53px;
background-color:#ececec;
text-decoration:none;
}

#nav fx {
display:inline;
padding:15px;
padding-left:30px;
padding-right:30px;
background-color:#ececec;
text-decoration:none;
}

#nav ax:hover {
background-image:url(images/tabbackit.jpg);
background-repeat:repeat-x;
height:900px;
}

#nav bx:hover {
background-image:url(images/tabbackit.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav cx:hover {
background-image:url(images/tabback.jpg);
background-repeat:repeat-x;
height:900px;
}

#nav dx:hover {
background-image:url(images/tabbackproc.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav ex:hover {
background-image:url(images/tabbackfin.jpg);
background-repeat:repeat-x;
height:900px;
}

#nav fx:hover {
background-image:url(images/tabbackhact.jpg);
background-repeat:repeat-x;
height:900px;
}
This entry was posted in Codes & Scripts and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>