this is accomplished by merely "nesting" another ul inside a li. The trick is to set the float to "none" for the drop down ul, otherwise it will inherit the float from the previous li styles. You also need to set a position of "relative" for the li which contains the nested list and a position of "absolute" for the nested list so that they line up, and so that the drop down is on top of the page. It is also a good idea to set the z-index on the nested ul so that it stays on top most layer.
We also set the display property to "none" to hide the drop down menu, then change the disp[lay property to "block" to show it, when the cursor goes over the "li", using the :hover pseudoclass.