Responsive Menu Toggle Doesn't Work - html

Question

For whatever reason, when I add a radio check into the css, it will appear in the menu but will not show any of the menu items. Any tips on getting it to toggle properly would be a huge help!
Here's the fiddle:
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>Home
<li><a>Posts</a>
<ul>
<li>Listings</li>
<li>Comics</li>
<li>Observations</li>
<li>Poems</li>
<li>Short Stories</li>
</ul>
</li>
<li>Photos
</li>
<li>Videos</li>
<li>About the Author</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

Add
#menu-toggle:checked + label + ul {
display: block;
}
http://jsfiddle.net/kjjvp1bx/3/
Or use jQuery, both works:
http://jsfiddle.net/kjjvp1bx/2/