將一個“較大”的ul的底部與另一個“ ul”的底部對齊

Question

我正在嘗試制作一個菜單，該菜單在單擊以將其激活的div的右側打開。 但是，我不知道如何正確進行定位。 我希望最后一個li （我在其中存儲子菜單選項的位置）的底部與激活彈出窗口的div的底部平齊。 但是，給予是負的利潤

ul.dd{
  z-index:100;
  position:relative;
  margin-bottom:-30px;
  display:none;
}

沒有鍛煉。 我該怎么做

http://jsfiddle.net/mBPfG/1/

謝謝！

Answer 1

您的容器div阻止了隱藏的<ul>標簽浮動到另一個標簽的右側。 還添加了負邊距頂部以調整定位。

我已經更新了jsfiddle 。

我只是添加：

.dd_container { width:600px; }

ul.dd{
  z-index:100;
  position:relative;
  margin-top:-60px;
  display:none;
}

但是，我建議將第二個<ul>嵌套在第一個<li> 。

Answer 2

我已經完全修改了HTML和CSS以得到更對稱的答案。

<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
    <li><a href="#_">more options --></a>
       <ul class="dd">
           <li><a href="#_">el1</a></li>
           <li><a href="#_">el2</a></li>
           <li><a href="#_">el3</a></li>   
       </ul>
   </li>
</ul>
<div class="cb"></div>

標記越少越好

查看完整的jsfiddle 。