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。

将一个“更大”的ul的底部与另一个的底部对齐

2 个答案: