white rectangle appearing when links pressed - css

Question

I am making a simple menu with border-radius:5px on the background when you hover or its clicked.
I notice that for an instant when I click on it a rectangle border, a filled in white appears, which then goes round (in ff and IE11)
www.lo.ee-web.co.uk
I am making a joomla template and pulling int he bootstrap code but NOT using it (leaving it in case I put any plugins in at a later date that might want it)
I figured it might need to overwrite some bootstrap css so I tried adding styling for a:active but that doesn't seem to help. I also notice that if I press a link a second time it doesn't do it so I am guessing that's because of the cache.
Is there a way to stop this annoying box?
thanks

Answer 1

try to set your background-color to transparent.
In your case the css was:
You do have the template.css connected to your html though, and in there i find this:
nav ul#mainMenu li a:hover, nav ul#mainMenu li.active a {
background-color:#3d4d42;
background-color:#597060;
border-radius:5px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#cdcdcd));
background: -webkit-linear-gradient(top, #efefef, #cdcdcd);
background: -moz-linear-gradient(top, #efefef, #cdcdcd);
background: -ms-linear-gradient(top, #efefef, #cdcdcd);
background: -o-linear-gradient(top, #efefef, #cdcdcd);
color:#597060;
}
This probably causes the white background.
If you change this you might be able to fix it.
Otherwise you can also try to give your css file a new property for the background, making it transparent (or any color you want) by giving it Background-color: transparent;
If that doesn't work, maybe you should try it with !important in it.
so : Background-color: transparent !important;

Answer 2

Add this line in css:
a, a:active, a:focus, a:visited{outline:none;}