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

css menu drop-down-menu flyout
mrblah picture mrblah · Nov 8, 2009 · Viewed 14.4k times · Source

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

Answer

Phil picture Phil · Dec 13, 2011

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

Related questions

Drop-down menu that opens up/upward with pure css

I've created a dropdown menu with pure CSS and I've gotten it to a place that I like except I want it to be "drop-up" not "drop-down" since the menu bar is going at the bottom of the layout. What …

Read More
Drop Down menu disappears when mouse hover

I have made a test page for my site Demo Link The dropdown menu here is disappearing whenever I hover the mouse over it. I have seen and tried the various solution already mentioned in the forum but none seem …

Read More
How to make the HTML link activated by clicking on the <li>?

I have the following markup, <ul id="menu"> <li><a href="#">Something1</a></li> <li><a href="#">Something2</a></li> <li&…

Read More