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

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 ?

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.

You can use css to position the submenu.

ul li {
    position: relative;
}

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

Your main menu items need to have a positioning context, probably relative. Then, for the child menu, set the positioning to absolute, set left to 0 and top to 100%. That should do the trick.