All browsers ignore all css class setting but one

[erezvol]

Hello

Here is the menu code:

<div id="" class="menu">
		<ul>
		<li><a href="subscription.php">Subscriptions</a></li>
		<li><a href="insert_data.php">Insert Trades</a></li>
		<li><a href="update_data.php">Update Trades</a></li>
		<li><a href="settings.php">Settings</a></li>
	 </ul>
	 </div>

Here is the css

.menu ul li a{
  text-decoration:none;
  font-family:arial;
  width:130px;
  font-size:1.0em;
  display:block;
  line-height:48px;
  color:#3D3C3A;
  text-align: center;
  border: 1px solid black;
  border-bottom: 1px solid #fff;
  border-radius: 7px 7px 0 0;
  background-color: #ccc;
}

.menu ul li a:hover{
   border-bottom: 1px solid #fff;
   background-color: #fff;
   font-weight:bold;
   font-style:italic;
   text-shadow:13px -15px 2px #ccc;
}

.active{
   background-color: #fff;
   font-weight:bold;
   font-size:150%;

This is ho it looks when I hover a link

and Here i how it looks after clicking a link

Why do all browsers : Chrome , Firefox, Opera accept font-weight: bold, yet ignore anything else? Anything !

[PaulOB]

@erezvol

.menu ul li a

Are you adding the .active class dynamically?

Assuming the link has a class of active then to over-ride the styles you already set for the element you would need to match the specificity of the original rule.

i.e. you would need this:

.menu ul li a.active{color:red}