Css 100%高度，适用于绝对定位的儿童潜水器

我正在做一个导航，孩子们将被显示在一个不同的盒子里，就像。我设法使用绝对定位来分离子元素，但无法使子元素背景具有100%的高度。它是一个列表元素，所以如果我把height:100%放进去，下面两个主要的导航元素就会消失。请帮忙！这是我的html：

<ul id="mainmenu">
     <li id="liHome" class="active">
         <a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a>
     </li>
     <li id="liServices" class=" ">
         <a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a>
         <div class="child">
         <ul style="" id="SubMenuY2" class="submenu">
             <li><a href="#">Sub-item 1</a></li>
             <li><a href="#">Sub-item 2</a></li>
         </ul>
         </div>
     </li>
     <li id="liEnvironment">
         <a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a>
     </li>
     <li id="liCareer">
         <a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a>
     </li>
     <li id="liContact">
         <a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a>
     </li>
 </ul>

---

非常感谢您的帮助。

我简化了您的代码。。实际上，我刚刚用

class=“child”

删除了

div

，因为您实际上并不需要它

然后，我所做的就是：

ul.submenu{
  position:absolute;
  left: 130px; top: 0;
  background:blue;
  width:130px;
  height: 100%;
}

看看小提琴：

---

这就是您要找的吗？

您是否考虑过只使用表格？不能使用表格。这是一个wordpress站点，客户希望保留代码的语义。谢谢你！我也想到了！

ul.submenu{
  position:absolute;
  left: 130px; top: 0;
  background:blue;
  width:130px;
  height: 100%;
}