Установка ширины раскрывающегося списка дольше, чем меню

Question

Я пробовал разные вещи и до сих пор смог получить именно то, что хотел. Я хочу создать меню. Я хочу, чтобы меню было шириной около 20 пикселей, а выпадающее меню - 80-100 пикселей.

<div id="menulevel2grouping2"> 
       <ul> 
        <li><a href="#" onClick="">T</a> 
         <ul> 
          <li><a href="#" onClick="">Type 1</a></li> 
          <li><a href="#" onClick="">Type 2</a></li> 
          <li><a href="#" onClick="">Type 3</a></li> 
          <li><a href="#" onClick="">Type 4</a></li> 
         </ul> 
        </li> 
        <li><a href="#" onClick="">S</a> 
         <ul> 
          <li><a href="#" onClick="">Small</a></li> 
          <li><a href="#" onClick="">Medium</a></li> 
          <li><a href="#" onClick="">Large</a></li> 
         </ul>  
        </li> 
       </ul> 

      </div> 



    #menulevel2grouping2{ 
    margin: 0px; 
    padding: 0px; 
} 

#menulevel2grouping2 ul{ 
    margin: 0px; 
    padding: 0px; 
    line-height: 30px; 


} 

#menulevel2grouping2 li{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    float: left; 
    position: relative; 


} 

#menulevel2grouping2 ul li a{ 
    text-align: center; 
    font-family: Helvetica, Verdana Arial, sans-serif; 
    font-size: 12px; 

    background-color: blue; 

    width: 60px; 

    text-decoration: none; 

    display: block; 
    color: #000000; 
}  

#menulevel2grouping2 ul ul{ 
    position: absolute; 
    display: none; 
    top: 30px 
} 

#menulevel2grouping2 ul li:hover ul{ 
    display: block; 

} 

Любые идеи о том, как я мог это сделать?

Спасибо!

Drjay

Answer 1

Это эффект, который вы хотите? См. Скрипку здесь: http://jsfiddle.net/scTgZ/

Я пересмотрел ваш css. Смотрите скрипку.

Answer 2

Прежде всего, когда это возможно, вы должны обеспечить класс или идентификатор для ваших элементов, чтобы избежать осложнений. Это цель CSS, облегчить вещи, а не усложнять их.

Во всяком случае, что-то, как это должно работать:

#menulevel2grouping2 ul li{width:20px; position:relative; z-index:10} 
#menulevel2grouping2 ul li ul li{width:200px; position:relative; z-index:10} 

вы не можете позицию и Z-индекс (я не испытывать его), и вы, возможно, потребуется некоторое поплавок для верхней ли, но это должно быть более чем достаточно, чтобы дать вам идею