複選框上的動畫：選中不工作

Question

因此，我在純CSS中製作了一個響應式導航欄，當我的複選框處於選中狀態時，每個過渡都正常工作：選中但不是我用作漢堡包的標籤的陰影顏色按鈕爲我的複選框。

我想知道爲什麼，你能幫我嗎？我做了我的代碼小提琴：在CSS的結尾最後一個屬性是不工作

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

另外一個，我的導航欄的不透明度的文字動畫，當我的導航欄展開但不是當它崩潰：在這兒是不工作的propertis

#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; 
} 

這是第一次，我通過複選框:)謝謝觸發事件僅在CSS中前進！

Answer 1

的問題是在我的HTML，而不是在我的CSS

我必須包括在我的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; 
} 

它解決了我所有的問題按鈕到末尾的導航欄和精確，也我編輯了小提琴

http://jsfiddle.net/zakL5e8b/2/