Afer all this time there is finally a dropdown menu that doesn't use javascript, table, conditional comments, hacks, extra markup and works in all the major browsers including IE6.

A CSS answer to the javascrpt drill-down menus.

Using just CSS to produce a multi-level menu with a click action instead of the normal hover.

Continuing with the 'click' series to demonstrate a dropline menu with a click action instead of the normal hover.

The next in the 'click' series to demonstrate a flyout menu with a click action instead of the normal hover.

The next in the 'click' series to demonstrate a vertical slide menu with a click action instead of the normal hover.

Using the latest techniques to update the previous lightbox demos.

Using just CSS to produce a multi-level menu with a click action instead of the normal hover suitable for the iPad.

CSS only tabbed pages with persist and several other features. For IE9+, Firefox, Opera, Safari and Chrome.

A CSS ONLY resizeable, normal, italic, slant and kerning font.

Using just CSS to produce a multi-level menu with a click to open/close action instead of the normal hover suitable for the iPad.

A CSS only click/tap action multi level menu suitable for touch-enabled devices.

A CSS ONLY responsive 'curtains' layout using NO javascript. Suitable all the latest browser versions and OS, including tablets, touch screens and smartphones

A CSS ONLY responsive multi-level droplist menu suitable for all the latest browsers and operating systems with animation.

A CSS ONLY responsive slide down/up full screen menu suitable for all the latest browsers and operating systems with animation.

A CSS ONLY vertical concertina menu suitable for all the latest browsers and operating systems with animation.

A CSS ONLY responsive multi-level droplist menu suitable for all the latest browsers and operating systems with animation.

A CSS only hover effect on an html imagemap. For Firefox, Chrome, Safari and Opera with fallback for IE7+

A CSS ONLY universal slide in/out menu suitable for all the latest browsers and operating systems with animation.

A CSS only version of tic-tac-toe for Player v Computer demonstating the use of :matches pseudo-class.

A simple CSS ONLY modal windows template, suitable for all the latest browsers.

A CSS only circular menu with bounce animation using cubic-bezier timing.

A CSS only page layout using 'scroll snap points to scroll the page one screen at a time.

A CSS only 3x3 grid layout using 'scroll snap points to scroll the grid one screen at a time. For IE11 and Edge at the moment.

A CSS only menu using flexbox and order animation. Suitable for all the latest browsers, but only Firefox supports animation of the 'order' style.

A CSS only responsive multi-level slide in menu suitable for all the latest browsers and OS.

A CSS only responsive multi-level concertina menu with bounce action suitable for all the latest browsers and OS.

A CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

A second CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

A CSS only responsive layout suitable for all the latest browsers and OS.

A third CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

A fourth CSS only responsive multi-level menu with slide action suitable for all the latest browsers and OS.

A fifth CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

See the Code - See it Full Page - See Details

Horizontal and Vertical scrolling with faded out content. **Please note:** I have not cross browser tested this, however this method leverages `background-attachment: local`, currently usable in everything except Android Browser & Opera Mini according to <a href="https://caniuse.com/#feat=background-attachment" target="_blank">caniuse.com</a>, meaning there is great support across devices and many Android devices use Google Chrome for Android rather than the OS browser. **Additional note:** There is a bug when previewing this pen on mobile, due to loading the example within an `iframe`. The shadow rgba values are read as a non transparent, this does not happen when previewing locally not in an iframe :-)

This Pen uses: HTML, SCSS, JavaScript, and