абсолютного позиционирования уль внутри другого ул

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. Остальные позиции будут содержать ширину 31 пиксель. Моя цель - составить список второго уровня, чтобы:

• ширина - 187px;
• он расположен с вершиной = 0 и справа = 0 относительно элемента первого уровня (другими словами, он выравнивается справа с элементом первого уровня)
• имеет индекс z выше, чем обертка, не будет перемещать другие предметы при отображении. Я попытался дать позицию относительно элемента первого уровня и абсолютную для подуровня, но не повезло. меню первого уровня при наведении указателя мыши:

меню второго уровня отображается фактически:

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;} 

Если это то поведение, которое вы хотите, мы можем принять его дальше.