绝对定位ul在另一个ul

Question

从这种情况开始：

<div id="wrapper">
    <ul class="menu">
        <li>item 1</li>
        <ul>
            <li>item 1.1</li>
            <li>item 1.2</li>
        </ul>
        <li>item 2</li>
    </ul>
</div>
#wrapper {  
    /*width: 218px;*/
    margin: 0px auto;
    background-color: #cccccc;
    overflow:hidden;
    position: absolute;
    top:  100px;
    left: 0;
    z-index: 999;
    width: 31px;
}

第二级菜单仅在单击第一级项目（例如第1项）时可见。第一级列表将腾出空间来显示次级列表。 第一级列表的宽度为31px;当我悬停一个项目时，右侧显示187个额外宽度，显示标签（例如第1项），css3过渡。其他项目将保持31px宽度。 我的目标是设置第二级列表的样式，以便：

• 宽度为187px;
• 它相对于第一级项目位于top = 0和right = 0（换句话说，它在右侧与第一级项目对齐）
• 的z-index高于包装器，因此在显示时不会移动其他项目。 我试图给出相对于第一级项目的位置和绝对的次级但没有运气。 悬停时的第一级菜单：

实际显示的第二级菜单：

Answer 1

您正在寻找的简单演示是here

 <div id="wrapper">
    <ul class="menu">
        <li>item 1
        <ul class="l2">
            <li>item 1.1</li>
            <li>item 1.2</li>
        </ul>
        </li>
        <li>item 2</li>
    </ul>
</div>

和css：

ul.l2 {
  background-color: grey;
  display: none;
  position: absolute;
  z-index: 99;
}

.menu li:hover ul.l2{display:block;}

如果这是您想要的行为，我们可以进一步发展。