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

Question

Someone told me once they it is possible to create menu's via CSS only, how can you?

Solution 1

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

Solution 2

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.