Animation on checkbox:checked not working - html

Question

So I've made a responsive navbar in pure CSS and every transition is working when my checkbox is :checked but not the color of the box-shadow of my label that I use as a hamburger button for my checkbox.
I wonder why, can you help me ? I've made a fiddle of my code : the last property in the end of the CSS is the one not working
http://jsfiddle.net/zakL5e8b/1/
#show-menu:checked + .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}
Also, the text of my navbar's opacity is animated when my navbar expands but not when it collapses :s here is the propertis not working
#navbar-nav {
visibility: hidden;
opacity: 0;
overflow: hidden;
position: relative;
list-style-type: none;
transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
#show-menu:checked + #navbar #navbar-nav {
visibility: visible;
opacity: 1;
transition: opacity .2s ease-in-out .2s;
-webkit-transition: opacity .2s ease-in-out .2s;
}
It's the first time that I trigger events only in CSS via checkboxes :) Thanks in advance !

Answer 1

The problem was in my html and not in my CSS
I had to include the button into the navbar at the end AND precise in my CSS
#show-menu:checked + **#navbar** .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}
It resolved all my problems, also i've edited the fiddle
http://jsfiddle.net/zakL5e8b/2/