Hello I would like to know how I would be able to create drop down links in my template that are responsive also I have done most of the work just stuck on the drop downs links to get them the same as parent and to drop down when click parent on them in responsive

http://codepen.io/mwbcomputers/pen/EdxLJ
Code:
<div class="container">
  <div class="header clearfix">
    <h1>MWB Computers &reg;</h1>
    <div class="nav">
      <input id="toggle" type="checkbox"/>
      <label class="toggle" onclick="" for="toggle"></label>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Wishlist (0)</a></li>
        <li><a href="#">My Account</a></li>
        <li><a href="#">Welcome, User</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Register</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="footer">
  <div class="container">
    <div class="powered">
      &copy; MWB Computers 2013 &reg;
    <div>
  </div>
</div>

* {
    margin: 0;
    outline: 0 none;
    padding: 0;
}
html, body {
    background: none repeat scroll 0 0 hsl(0, 0%, 95%);
    height: 100%;
}
body, a {
    color: hsl(0, 0%, 25%);
    font: 16px Helvetica,Verdana,Geneva,sans-serif;
}

body { 
  -webkit-animation: bugfix infinite 1s; }
  @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} 
}

.container {
    width: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    min-height: 100%;
}
.container:after {
    clear: both;
    content: "";
    display: block;
    height: 30px;
}

.header{
	min-height: 100px;
	height: 100%;
	padding: 0 20px;
	background: #FFFFFF;
  position: relative;
}

.header > h1 {
	float: left;
	padding: 30px 0 0;		
	font-style: italic;
	font-family: Georgia;
	font-size: 28px;
	color: #DFDFDF;
}

.nav{ 
	display: block; 
	float: right; 
}

.nav, .menu, .menu > li, .menu > li > a{ 
	height: 100%; 
}

.menu > li { 
  list-style: none; 
  float:left;	
}

.menu > li > a{
	display: block;
	padding: 42px 20px;
	text-decoration: none;
	font-weight: normal;
	font-size: 16px;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

.menu > li > a:hover, .menu > li > a:focus{
	background: #F2F2F2;
	box-shadow: inset 0px 5px #51C1F1;
	color: #51C1F1;
	padding: 50px 20px 34px;
}

.footer {
    background: none repeat scroll 0 0 hsl(0, 0%, 100%);
    border-top: 1px solid hsl(198, 85%, 63%);
    font-size: 12px;
    height: 12px;
    padding: 8px 0;
    text-align: center;
}

#toggle, .toggle { 
  display: none; 
}


.toggle{ 
	z-index: 2; 
}


@media only screen and (max-width: 979px) {
  
.header {
    position: relative;
}
#toggle, .toggle {
    display: none;
}
.menu > li {
    float: left;
    list-style: none outside none;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.menu {
    display: none;
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
}
.menu > li {
    display: block;
    margin: 0;
    width: 100%;
}
.menu > li > a {
    -moz-box-sizing: border-box;
    display: block;
    text-decoration: none;
    width: 100%;
}
.toggle {
    cursor: pointer;
    display: block;
    position: relative;
}
#toggle:checked ~ .menu {
    display: block;
    opacity: 1;
}
.header {
    background: none repeat scroll 0 0 hsl(0, 0%, 100%);
    height: 100%;
    min-height: 100px;
    padding: 0 20px;
}
.header > h1 {
    color: hsl(0, 0%, 87%);
    float: left;
    font-family: Georgia;
    font-size: 28px;
    font-style: italic;
    padding: 30px 0 0;
}
.nav {
    display: block;
    float: right;
}
.nav, .menu, .menu > li, .menu > li > a {
    height: 100%;
}
.menu > li > a {
    -moz-box-sizing: border-box;
    display: block;
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    padding: 42px 20px;
    text-decoration: none;
    transition: all 0.25s linear 0s;
}
.menu > li > a:hover, .menu > li > a:focus {
    background: none repeat scroll 0 0 hsl(0, 0%, 95%);
    box-shadow: 0 5px hsl(198, 85%, 63%) inset;
    color: hsl(198, 85%, 63%);
    padding: 50px 20px 34px;
}
.toggle {
    z-index: 2;
}
.menu {
    background: none repeat scroll 0 0 hsl(0, 0%, 100%);
    border-top: 1px solid hsl(198, 85%, 63%);
}
.menu, .menu > li, .menu > li > a {
    height: auto;
}
.menu > li > a {
    padding: 15px;
}
.menu > li > a:hover, .menu > li > a:focus {
    background: none repeat scroll 0 0 hsl(0, 0%, 95%);
    box-shadow: 5px 0 hsl(198, 85%, 63%) inset;
    padding: 15px 15px 15px 25px;
}
.toggle:after {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 hsl(198, 85%, 63%);
    border-radius: 2px 2px 2px 2px;
    color: hsl(0, 0%, 100%);
    content: "Main Menu";
    display: block;
    font-size: 12px;
    margin: 33px 0;
    padding: 10px 50px;
    text-align: center;
    transition: all 0.5s linear 0s;
    width: 200px;
}
.toggle:hover:after {
    background: none repeat scroll 0 0 hsl(198, 64%, 55%);
}
#toggle:checked + .toggle:after {
    content: "Close Menu";
}
.header > h1 {
    text-align: center;
}
.header > h1, .nav, .toggle:after {
    float: none;
}
.toggle:after {
    text-align: center;
    width: 100%;
}

}