html - 单击复选框时打开菜单

Question

嘿，我创建了这个与菜单组合的复选框:

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