Setting dropdown width longer than menu - html

Question

I have been trying different things and still have been able to get exactly what I wanted. I want to create a menu. I want the menu to be about 20px wide and the dropdown to be 80-100px.
<div id="menulevel2grouping2">
<ul>
<li>T
<ul>
<li>Type 1</li>
<li>Type 2</li>
<li>Type 3</li>
<li>Type 4</li>
</ul>
</li>
<li>S
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</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;
}
Any ideas on how I could get it done?
Thanks!
Drjay

Answer 1

Is this the effect you want? See fiddle here: http://jsfiddle.net/scTgZ/
I have revised your css. See the fiddle.

Answer 2

First of all, whenever possible you should provide a class or id to your elements to avoid complications. That's the purpose of CSS, to facilitate things, not to complicate them.
Anyway, something like this should work:
#menulevel2grouping2 ul li{width:20px; position:relative; z-index:10}
#menulevel2grouping2 ul li ul li{width:200px; position:relative; z-index:10}
you may not need the position and z-index (I'm not testing it) and you may need some float for the upper li, but this should be more than enough to give you an idea