CSS Drop-down menu: second level positioning? - html

Question

So I'm working on a CSS drop down menu where the div container is revealed by a radio button and I have that working as I'd like.
However, I'd like to add a second level to my drop-down just like it (same width, positioning beneath parent, ect..) I have it revealing the second level when you click on the input, however, If the input is in the middle (in between two links) my first level's links move beneath my first level of sub-menu. Please help? I can't figure out how to keep it looking the same way it's just if that input has another sub menu I would like for it to drop down below the first.
My code:
/*CSS for Menu */
.menu {
position: fixed;
top: 0;
left: 0;
height: 20px;
width: 100%;
z-index: 10000;
display: inline-block;
background-image: black url(../images/glossyback.gif);
background-color: #0066CC;
text-align: center;
font-family: Arial, Geneva, sans-serif;
}
/*CSS for main menu labels */
input + label {
color: #FFFFFF;
display: inline-block;
padding: 6px 8px 10px 24px;
background-image: black url(../images/glossyback2.gif);
height: 8px;
margin: 0;
line-height: 12px;
position: relative;
}
input:hover + label:hover {
background: #3385D6;
}
input + label + div {
margin: 0;
margin-top: 2px;
padding: 16px;
border: 1px solid;
width: 100%;
height: auto;
position: absolute;
top: 20px;
display: none;
}
input:checked + label + div {
display: block;
}
/*CSS for main menu labels within menu class*/
.menu input {
display: none;
opacity: .3;
margin-right: -.7em;
margin-left: 0em;
overflow: visible;
}
.menu a {
text-decoration: none;
color: #FFFFFF;
}
.menu label span {
z-index: 1000;
font-size: 12px;
line-height: 9px;
padding: 6px 1em 12px 1em;
display: block;
margin-top: -1px;
background-image: url(../images/glossyback.gif) repeat-x bottom left;
}
.menu label span a:hover {
background-image: black url(../images/glossyback2.gif);
}
.menu input:checked + label {
background-color: #AFCEEE;
border-color: #6696CB;
z-index: 1000;
}
div.menu input + label {
z-index: 1000;
padding: 0;
border-color: #ccc;
border-width: 0 1px;
height: 19px;
margin: 0 -.23em;
}
/*CSS for submenu container */
.menu input + label + div {
position: absolute;
border: 1px solid #808080;
right: 0;
background: #F0F6FC;
text-align: center;
width: 100%;
margin: 0 auto;
}
.menu input + label + div > div {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ABABAB;
padding: 16px;
padding-top: 5px;
}
/*CSS for sub menu items*/
.sub-menu {
font-size: 14px;
display: inline-block;
}
.sub-menu a {
text-decoration: none;
color: #EEEEEE;
}
.sub-menu ul {
list-style-type: none;
}
.sub-menu li {
width: 175px;
color: #F0F0F0;
background-color: #9CB9D7;
display: inline-block;
}
.sub-menu li:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #3385D6;
}
/*CSS for sub-menu second level */
.sub-menu input[type=radio] {
display: none;
}
.sub-menu input[type=radio]:checked ~ .remove-check {
display: none;
}
.sub-menu input[type=radio]:checked ~ #second-level {
display: block;
}
#second-level {
display: none;
}
/* The styling of items, ect...*/
.sub-menu input[type=text] {
width: 225px;
padding: 12px 14px;
}
.sub-menu div {
border: 1px solid #808080;
right: 0;
background: #F0F6FC;
text-align: center;
width: 100%;
margin: 0 auto;
}
.sub-menu div div {
top: 90%;
z-index: 1000;
position: absolute;
border: 1px solid #ABABAB;
padding: 16px;
padding-top: 5px;
}
.sub-menu .second-level-items {
width: 175px;
color: #F0F0F0;
background-color: #9CB9D7;
display: inline-block;
}
<div class="menu">
<input type="radio" name="UItab" id="tabf">
<label for="tabf"><span>Styles</span>
</label>
<div>
<div>
<ul class="sub-menu">
<a href="">
<li id="linkj">First Link</li>
</a>
<label for="reveal-email">
<li>Tab in submenu</li>
</label>
<input type="radio" id="reveal-email">
<div id="second-level">
<div>
<a href="">
<li>Links2.0</li>
</a>
</div>
</div>
<label for="reveal-email">
<li>Tab in submenu</li>
</label>
<input type="radio" id="reveal-email">
<div id="second-level">
<div>
<a class="second-level-items" href="">
<li>Links2.0</li>
</a>
</div>
</div>
<a href="">
<li id="linkj">First Link</li>
</a>
</div>
</div>
</div>