CSS3 Onclick Menu

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><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>

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.

First of all you should think if using CSS only is a great way to go. Actually, it uses the `:focus` selector but when you'll mousedown over an element of the dropdown list, the dropdown list will be hidden since the `:focus` won't be fired to the parent anymore. If you use the TAB key to navigate between your elements, you won't be able to see which option from the dropdown is selected. I would suggest you to use a tiny bit of JS instead. -- Also providing a JSFiddle is a great option to get answers :) — Titouan Launay, Jul 08 '15 at 19:47
it doesn't work in jsfiddle because you have no units on your height/widths. To be honest I wouldn't expect it to work anywhere as those are invalid values for height and width. — rlemon, Jul 11 '15 at 13:50
also you can try playing with :target, as seen in my answer [here](http://stackoverflow.com/a/15464016/829835) — rlemon, Jul 11 '15 at 13:54

score 1 · Accepted Answer · answered Jul 11 '15 at 13:42

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.

answered Jul 11 '15 at 13:42

Titouan Launay

178
1
10

CSS3 Onclick Menu

1 Answers1