Border on bottom not disappearing on :active

Question

I'm trying to get the bottom blue border to disappear on :active. The persistant border is tied to the background div but it's not going away when the hyperlink is active even though the hyperlink has no bottom border.

Here is a fiddle of the project:

http://jsfiddle.net/ajrdesign/cTKnn/5/

Anyone know why this background div is appearing above the other elements?

Answer 1

Figured it out. I had added border to the ul li element and not the li element. So the :hover and :active were simple adding another border on top of that one. Changed that and it worked great!

http://jsfiddle.net/ajrdesign/HgnwG/