CSS :hover works but :active does not - html

Question

I'm preparing a WordPress theme and can't figure why :active in my CSS doesn't work while :hover is working fine.
HTML:
(...)
<div id="mainMenu">
<div id="mm_links">
<a id="mm_1" href="index.php/about-icar/">About ICAR</a><br/>
<a id="mm_2" href="">News</a><br/>
<a id="mm_3" href="index.php/for-the-authors/">For the authors</a><br/>
<a id="mm_4" href="index.php/resources/">Resources</a><br/>
<a id="mm_5" href="index.php/contact-promotion/">Contact<br/>& promotion</a><br/>
</div>
<div id="mm_tail"></div>
</div>
(...)
CSS:
div#mainMenu{
float: left;
width: 140px;
height: 430px;
margin-top: 48px;
background-image: url("img/mainMenu.svg");
background-size:cover;
text-align: center;
}
div#mainMenu a{
font-family: 'Raleway', sans-serif;
font-size: 10.6pt;
text-decoration: none;
}
div#mainMenu a:link, div#mainMenu a:visited, div#mainMenu a:active {
color: #262E5B;
}
div#mainMenu a:hover{
color: #262E5B;
}
a#mm_1 {
position: relative;
display: table-cell;
top: 21px;
left: 18px;
width: 120px;
height: 35px;
vertical-align: middle;
}
a#mm_1:hover, a#mm_1:active { <-- THIS IS NOT WORKING
background-image: url('img/ElementAbout.png');
background-size: cover;
}
div#mm_links{
clear:both;
height: 430px;
}
div#mm_tail{
background-color: white;
border-left: 2px solid #262E5B;
border-right: 2px solid #262E5B;
border-bottom: 2px solid #262E5B;
width: 30px;
height: 100%;
clear: both;
float: right;
}

Answer 1

What are you trying to accomplish? If you remove the :hover and press the link I think you will find that the :active is working just fine. But it doesn't do much good since you are styling it the same as when you hover over it. So basically you are hovering over it and then the background-image shows, then you click the link and the same background-image keeps showing.
a#mm_1:active {
background-image: url('img/ElementAbout.png');
background-size: cover;
}

Answer 2

The :hover pseudo-class selects an element when the mouse cursor is right above it.
The :active pseudo-class applies styles when the element is clicked (or activated in another way).
In your code, your :hover and :active styles are identical.
a#mm_1:hover, a#mm_1:active {
background-image: url('img/ElementAbout.png');
background-size: cover;
}
You won't notice any difference when hovering or clicking.
However, give each a different style and you'll see the difference:
a#mm_1:hover { background-color: yellow; }
a#mm_1:active { background-color: red; }
DEMO