CSS3 Onclick Menu - css

Question

I used the following code to create my menu, for learning purposes:
http://koen.kivits.com/articles/pure-css-menu/
My CSS:
html, body {
margin: 0;
padding: 0;
min-width: 1920;
}
.container {
position: relative;
display: inline-block;
width: 1920;
height: 20;
background: linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
}
.wrapper {
position: relative;
display: inline-block;
width: 1920;
height: 24;
background: linear-gradient(#c8bfb0, #f5efe6);
border-bottom: 1px solid #d3c7b6;
}
.seperator {
position: absolute;
display: inline;
width: 2;
height: 22;
border: 2px solid #fff;
background-color: #000;
}
.onclick-menu-red {
font-family: verdana;
font-size: 11px;
color: #eaeaea;
background: linear-gradient(#858585, #636263);
box-shadow: inset 0 1px 0 #a8a8a8;
position: relative;
display: inline-block;
cursor: pointer;
}
.onclick-menu-red:hover {
color: #fff;
}
.onclick-menu-red:active {
background-color: red;
}
.onclick-menu-red:after {
background-color: red;
}
.onclick-menu-red:focus {
pointer-events: none;
background-color: red;
}
.onclick-menu-red:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
}
.onclick-menu-content {
font-family: verdana;
pointer-events: auto;
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
float: left;
}
.onclick-menu-red.no-pointer-events {
pointer-events: auto !important;
}
.onclick-menu-red.no-visibility .onclick-menu-content {
visibility: visible !important;
display: none;
}
.onclick-menu-red.no-visibility:focus .onclick-menu-content {
display: block;
}
.onclick-menu-red.no-opacity .onclick-menu-content {
opacity: 1 !important;
}
.onclick-menu-red {
padding: 3 27 4 27;
margin: 0 0 1em 0;
outline: 0;
}
.onclick-menu-red:before {
padding: 5px 10px;
background-color: #94a4a5;
}
.onclick-menu-content {
display: inline-block;
background: linear-gradient(#c8bfb0, #f5efe6);
width: 600;
margin-top: 5px;
margin-left: 0;
padding: 5px;
float: left;
}
.onclick-menu-content ul {
display: inline;
}
.onclick-menu-content li {
display: inline;
color: #f2f5e9;
list-style-type: none;
white-space: nowrap;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
}
a:active {
color: #fff;
font-weight: bold;
text-decoration: none;
}
My HTML:
<div class="container">
<div tabindex="0" class="onclick-menu-red">Home
<ul class="onclick-menu-content">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div class="seperator"></div>
<div tabindex="0" class="onclick-menu-red">Settings
<ul class="onclick-menu-content">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div class="seperator"></div>
<div tabindex="0" class="onclick-menu-red">Expenses
<ul class="onclick-menu-content">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div class="seperator"></div>
<div tabindex="0" class="onclick-menu-red">Incomes
<ul class="onclick-menu-content">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<div class="wrapper"></div>
My issue:
I did manage to fix a few issues I had, but my main issue right now is that I want the buttons to change to "red" once clicked.

Answer 1

This is a simple issue which comes from the use of the property background for elements basically but only using background-color when overwriting property.
You might change background-color: red to background: red to fix this issue.