откройте меню при нажатии на флажок

Question

эй там я создал этот флажок в comobination с меню:

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

     <ul class="sub-nav"> 
       <li>Johnny</li> 
       <li>Julie</li> 
       <li>Jamie</li> 
     </ul> 

стиль:

input[type=checkbox] { 
display:none; 
} 

input[type=checkbox] + label 
{ 
background: #999; 
height: 16px; 
width: 16px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
input[type=checkbox]:checked + label 
{ 
background: #0080FF; 
height: 16px; 
width: 16px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
.sub-nav { 
    display: none; 
} 
input[type=checkbox]:checked > .sub-nav { 
    display: block; 
    position: absolute; 
    top: 100px; 
    left: 0; 
    z-index: 99999; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

демонстрационная: http://jsfiddle.net/4huzr/71/

я хочу суб- чтобы открыть, когда вы нажмете на серый флажок (когда вы нажмете еще раз, он должен скрыться), но этот образец не работает, кто-нибудь может помочь?

Answer 1

Подменю не является дочерним элементом ввода, поэтому > не будет работать.

JSFiddle Demo

CSS-следует читать

input[type=checkbox]:checked ~ .sub-nav { 
    display: block; 
    position: absolute; 
    top: 100px; 
    left: 0; 
    z-index: 99999; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

Answer 2

Изменение:

input[type=checkbox]:checked > .sub-nav { 

к:

input[type=checkbox]:checked ~ .sub-nav { 

jsFiddle example

> выбирает ребенка (этот суб-навигатор не является), где ~ является общим селектором.