响应式菜单切换不起作用

Question

无论出于何种原因，当我向css中添加无线电检查时，它将出现在菜单中，但不会显示任何菜单项。任何提示让它正确切换将是一个巨大的帮助！

这里的小提琴： http://jsfiddle.net/casslt07/kjjvp1bx/

**HTML** 

    <div id="nav"> 
     <nav id="nav" class="clearfix"> 
     <!-- nav menu top level --> 
    <input type="checkbox" id="menu-toggle"> 
    <label for="button" onclick></label>  
<ul class="first-level"> 
    <li><a href="#">Home</a> 
    <li><a>Posts</a> 
     <ul> 
      <li><a href="#">Listings</a></li> 
      <li><a href="#">Comics</a></li> 
      <li><a href="#">Observations</a></li> 
      <li><a href="#">Poems</a></li> 
      <li><a href="#">Short Stories</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Photos</a> 
    </li> 
    <li><a href="#">Videos</a></li> 
    <li><a href="#">About the Author</a></li> 
    </ul> 


     <?php get_search_form(); ?> </nav> 
                   </div> 




**CSS:** 

    /* Config */ 
body {font-family:Arial} 
ul, li {list-style:none; margin:0; padding:0;} 

#menu-toggle { 
    display:none; 
} 
#nav label { 
    display:none; 
    font-size:20px; 
    list-style:none; 
} 

/* Nav */ 
#nav { 
    background-color:#33447A; 
    height: inherit; 
    border-bottom: 3px solid #13EBC7; 
    position:relative; 
    display:block; width: 100%; overflow:visible;} 

#nav a { 
    color:#fff; display:block; font-size: 11pt; padding:18px 20px; text-decoration:none; text-align: left;} 
#nav ul li {position:relative;} 

/* First-Level */ 
#nav li {transition:background-color .5s; float:left;} 
#nav li:hover {background-color:#50AEED; -webkit-transition: margin-bottom .2s; /* Safari 3.1 to 6.0 */ 
    transition: margin-bottom .2s;} 
#nav > ul > li {display:block; float:left; } 

/* Second-level */ 
#nav li ul {width: 100%;} 
#nav > ul li:hover > ul {opacity:1; top:54px; visibility:visible; border-radius: 4px; z-index:3; } 
#nav .first-level .second-level > li {float:left;} 
#nav > ul ul {opacity:0; visibility:hidden; position:absolute; top:60px; transition:all .25s; width:1000px;} 
#nav > ul ul li {background-color:#3498db; left:0;} 
#nav > ul ul li a {padding:10px 20px} 

/* Clearfix */ 
.clearfix:after {visibility: hidden; display: block; font-size: 0; content:" "; clear:both; height:0;} 


.nav-search { 
    opacity: .25; 
    width:35%; 
    float: right; 
    display:inline; 
    position: relative; 
    background: #3498db; 
    background: url('http://1touchsigns.com/images/search.gif'); 
    background-repeat: no-repeat; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
      border-radius:10px; 
    border:none; 
    top:7px; 
    padding:6px; 
    outline:none; 
    transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out; 
} 

.nav-search:focus { 
    background: white; 
    opacity: 1; 
} 

#responsive { 
display: none; 
} 


@media only screen and (max-width: 480px) { 

    #menu-toggle { 
    display:block; 

} 

    #nav label {display: block;height:50px;width:50px;line-height:50px;text-align:center;color:white;font-size:150%;background-color: #83CE69; cursor:pointer;} 

    #menu-toggle:checked + #nav {display: block;} 
    #nav label:active #nav {display: none;} 

    #nav { 
    display: block; 
     width: 100%; 
    height:auto; 
     float: right; 
     margin-right: 10px; 
     background-color: #232323; 
    border-bottom-width: 0px; 
    } 

    #nav ul { 
    display:none; 
    } 

    #nav ul:hover { 
    display:block; 
    } 

    #nav li { 
    width:100%; 
    } 

    #nav ul ul li { 
    width:100%; 
    color:white; 
    background-color:black; 
    display:block; 
    } 

    #nav ul ul li:hover { 
    display:block; 
} 
    } 

Answer 1

添加

#menu-toggle:checked + label + ul { 
    display: block;   
} 

http://jsfiddle.net/kjjvp1bx/3/

或者使用jQuery，这两部作品：

http://jsfiddle.net/kjjvp1bx/2/