• Home
• Curved Corners
• Scroller
• CSS Frames
• 'Sliding Doors'
• Bevelled Buttons
• Drop Shadows
• Generated Content
• :first Pseudoclasses
• :hover Pseudoclass
• Zoom
• Pop-Out Menus

CSS demos

Pop-Out Menus

Here's a simple two-level horizontal menu. It's implemented with nested unordered lists, list items given relative positioning to allow the second level to be positioned absolutely off them. Compliant browsers use a :hover rule on the li items to reveal the second level - Internet Explorer is bashed into agreement with some Javascript, fearlessly breaking my own rule about avoiding it. Here's the Javascript, if you want it.

This is unashamedly stolen from AListApart, who were inspired by the latest iteration of Suckerfish dropdowns. Round and round we go.