Navigation Bar Clicking Problems

Sometimes when the visitor clicks a button, nothing happens. I can't seem to figure out what the problem is. Working Navigation Bar

<ul id="navigation">
			<li style="border-left-width:0px;"><a href="http://www.team188.com/web/">Main</a></li>
			<li><a href="http://www.team188.com/web/">Ask 188</a></li>
			<li><a href="http://www.team188.com/web/">Season</a></li>
			<li><a href="http://www.team188.com/web">Resources</a></li>
			<li><a href="http://www.team188.com/web/">Robots</a></li>
			<li><a href="http://www.team188.com/web/">Gallery</a></li>
			<li><a href="http://www.team188.com/web/">History</a></li>
			<li><a href="http://www.team188.com/web/">FLL - Vex</a></li>
			<li><a href="http://www.team188.com/web/">Sponsors</a></li>
			<li><a href="http://www.team188.com/web/">Mentors</a></li>
			<li><a href="http://www.team188.com/web/">Contact</a></li>
		</ul>

And the css with it is:

#navigation {
margin: 0;
margin-top:-47px;
margin-left:auto;
margin-right:auto;
padding: 0;
width: 795px;
height: 37px;
border-style: solid;
border-color:#AB0B0B;
border-width:2px;
border-bottom-width:0px;
border-left-width:1px;
border-right-width:1px;
background: #FDE5D8;
line-height:200%;
list-style: none;
}

#navigation li {
text-align:center;
vertical-align:middle;
width: 71px;
height:37px;
float: left;
border-left-width:1px;
border-left-color:#FFCCCC;
border-left-style:solid;
}

#navigation li a {
display: block;
vertical-align:middle;
color:#AB0B0B;
font-weight:500;
text-decoration:none;
width: 71px;
height:37px;
}

#navigation li a:hover {
text-decoration:underline;
font-weight:500;
color:#AB0B0B;
vertical-align:middle;
width: 71px;
height:37px;
}

#navigation li a:active {
text-decoration:line-through;
font-weight:400;
color:#AB0B0B;
vertical-align:middle;
line-height:150%;
width: 71px;
height:37px;
}

Any clues? Is the problem because of the fact that the line-height is changing?