javascript - 将一个“更大” 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

我已经完全修改了HTMLandCSS以获得更正确的答案。

<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。