CSS下拉菜单：二级定位？

Question

所以我正在开发一个CSS下拉菜单，其中div容器由一个单选按钮显示，我按照我的意愿工作。

但是，我想在我的下拉列表中添加第二个级别（相同宽度，位于父级下方等等）。当您单击输入时，我会显示第二级，但是，如果输入位于中间（在两个链接之间），我的第一级链接将移动到我的第一级子菜单下方。请帮忙？我无法弄清楚如何保持它看起来的方式只是如果输入有另一个子菜单我希望它下降到第一个以下。

我的代码：

/*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>