menus that expand when you mouse over, done purely via CSS?

Someone told me once they it is possible to c开发者_Go百科reate menu's via CSS only, how can you?

It's done through the selector. You use a pseudo class to specify a particular element to only be displayed when its parent element is being hovered over.

#nav li:hover > ul {
display: block;
}

This will only get the ul to display if its parent element, #nav is being hovered over. The ul now is the drop down menu into which you can place more list items. This will work with however many levels you want your drop down menu to have.

This technique is showcased very nicely in this tutorial: CSS3 Dropdown Menu

I was typing up an answer, but this simple, short page goes over it better than I could say. Basically you do display: hidden on the expanded part, and then add a display: block to the trigger element on its hover state.