Positioning Absolute Elements Below Each Other - css

Question

I am attempting to create a CSS3 hover menu that transitions out and shows sub menus below it. The problem I am having is that I can't position the submenus below each other. Currently, I have this effect - http://jsfiddle.net/7pz3g/1/
Here is the HTML markup -
<nav id="navbar">
<ul class="iconContainer">
<li>
<i class="fa fa-home fa-lg"></i>
<ul id="wrapperFirst" class="extMenu">
<li><h3>Testing</h3></li>
<li>SubMenu
<ul id="wrapperSecond" class="subMenu">
<li><h3>ORGANIZATIONS</h3></li>
<li>Reddit</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS MarkUp -
li {
list-style: none;
}
#navbar {
background-color: #333333;
position: fixed;
text-align: center;
left: 0;
top: 0;
height: 100%;
z-index: 100;
width: 60px;
display: table;
}
#navbar .iconContainer li {
color: white;
padding: 0 2%;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
height: 60px;
}
#navbar .iconContainer li:first-child {
border-top: 1px solid rgba(255, 255, 255, .2);
}
#navbar i {
text-decoration: none;
color: white;
line-height: 60px;
font-size: 1.5em;
text-shadow: 1px 1px 1px #000;
width: 60px;
opacity: .5;
}
#navbar .iconContainer {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: middle;
z-index: 510;
}
#navbar li:hover i {
background-color: #222222;
opacity: 1;
}
#navbar li:hover #wrapperFirst.extMenu {
left: 60px;
}
#wrapperFirst.extMenu {
background-color: #222;
height: 100%;
left: -1000px;
position: fixed;
top: 0;
bottom: 0;
width: 250px;
padding: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#wrapperFirst.extMenu .raq {
text-align: right;
float: right;
color: #75A4C7;
}
#wrapperFirst.extMenu li:hover #wrapperSecond.subMenu {
left: 311px;
}
#wrapperFirst.extMenu li {
padding: 10px 20px;
text-align: left;
height: auto;
text-decoration: none;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
color: white;
opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
}
#wrapperFirst.extMenu li:first-child {
border-top: 1px solid rgba(255, 255, 255, .2);
}
#wrapperSecond.subMenu {
display:table-cell;
background-color: #222;
height: 100%;
left: -1000px;
position: fixed;
top: 0;
bottom: 0;
width: 600px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#wrapperSecond.subMenu h3 {
text-align: center;
}
#wrapperSecond.subMenu .subtitle {
font-family: 'SourceSansProRegular';
font-size: .6em;
}
#wrapperSecond.subMenu li a {
text-decoration: none;
color: #75A4C7;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
}
#wrapperSecond.subMenu li {
padding: 10px 20px;
text-align: left;
height: auto;
text-decoration: none;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
color: white;
opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
}
#wrapperSecond.subMenu li {
opacity: 1;
}
#wrapperSecond.subMenu {
width: 600px;
opacity: 1;
}
#wrapperSecond.subMenu h3 {
text-align: center;
}
#wrapperSecond.subMenu .subtitle {
font-family: 'SourceSansProRegular';
font-size: .6em;
}
#wrapperSecond.subMenu li a {
text-decoration: none;
color: #75A4C7;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
}
I would like to have each submenu transition below their root menus, but yet still stay on top of the other elements on the page. Any ideas? Thanks!!!

Answer 1

http://jsfiddle.net/ypzcG/
#wrapperSecond.subMenu li {
opacity: 1;
position: relative;
margin-top: 70px;
}