CSS3 Onclick菜单

Question

我使用以下代码创建我的菜单，用于学习目的：

http://koen.kivits.com/articles/pure-css-menu/

我的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;
}

我的HTML：

<div class="container">

<div tabindex="0" class="onclick-menu-red">Home
<ul class="onclick-menu-content">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>

<div class="seperator"></div>

<div tabindex="0" class="onclick-menu-red">Settings
<ul class="onclick-menu-content">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>

<div class="seperator"></div>

<div tabindex="0" class="onclick-menu-red">Expenses
<ul class="onclick-menu-content">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>

<div class="seperator"></div>

<div tabindex="0" class="onclick-menu-red">Incomes
<ul class="onclick-menu-content">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>

</div>

<div class="wrapper"></div>

我的问题：

我确实设法解决了我遇到的一些问题，但我现在的主要问题是我希望按钮更改为＆＃34; red＆＃34;点击一次。

Answer 1

这是一个简单的问题，它源于对元素使用属性background，但在覆盖属性时仅使用background-color。

您可以将background-color: red更改为background: red以解决此问题。