CSS: make dropdown submenu appear below parent <ul> <li>

Question

I am trying to build a CSS dropdown menu. The problem is that all child nodes in the ul li tree appear on the same row, instead of below the parent. How do I make the subcategories appear BELOW the parent ?

Answer 1

Add display:block; float: left;position: relative; on the li to establish a containing block and then position:absolute; top:100%; left:0; on the sub-menu ul to position it with respect to its containing block.

Answer 2

You can use css to position the submenu.

ul li {
    position: relative;
}

ul li ul.sub {
    position: absolute;
    left: 0;
    top: 100%;
}