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

}

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.