CSS play

Doing it with Style

Search CSS PLAY

CSS NAVIGATION MENUS

Latest Menus

A simple responsive checkbox tree menu
10-08-2021A responsive CSS only simple checkbox tree menu with transitions.
A very simple responsive click action tree menu
07-08-2021A responsive CSS only simple tree menu without using radio/checkbox inputs.
A simple responsive click action tree menu
04-08-2021A responsive CSS only simple tree menu.
A CSS ONLY click action tree menu v6c
04-05-2019A 6c responsive multi-level tree menu.
A CSS ONLY click action tree menu v6bb
01-05-2019A 6bb responsive multi-level tree menu.
A CSS ONLY click action tree menu v6b
01-05-2019A 6b responsive multi-level tree menu.
A CSS ONLY click action tree menu v6
30-04-2019A sixth responsive multi-level tree menu.
A circular menu
11-07-2017An update to a circular menu with circular sub menus
A CSS ONLY click action tree menu v5
24-04-2017A fifth responsive multi-level tree menu with slide action
A CSS ONLY click action menu v4
13-03-2017A fourth responsive multi-level menu with slide action
A CSS ONLY click action tree menu v3
21-01-2017A third responsive multi-level tree menu with slide action
A CSS ONLY click action tree menu v2
16-12-2016A second responsive multi-level tree menu with slide action
A CSS ONLY click action tree menu
17-11-2016A responsive multi-level tree menu with slide action
A CSS ONLY click action concertina menu
14-11-2016A responsive multi-level concertina menu with bounce
A CSS ONLY click action slide in menu
29-10-2016A responsive multi-level slide in menu
A CSS ONLY click action flexbox menu
13-05-2016An accordion menu using flexbox and order animation.
A circular menu with bounce
09-03-2016A CSS only circular menu with bounce animation using cubic-bezier animation timing
A responsive swipe-momentum menu
24-02-2016A responsive swipe action momentum menu suitable for all the latest browsers and OS.
A responsive slide down menu
19-09-2015A responsive slide down menu suitable for all the latest browsers, OS and devices without using media queries.
A responsive multi-level menu
26-05-2015A responsive multi-level menu suitable for all browsers and OS, PCs, tablets and smartphones using a little jQuery.
A responsive multi-level menu
18-05-2015Another responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
A responsive multi-level menu
14-05-2015A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
A responsive fade in/out menu panel
23-04-2015A responsive fade in/out menu panel suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A second responsive droplist
20-04-2015A second responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A responsive droplist
10-01-2015A responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A responsive multi-level
16-12-2014A responsive click/tap multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A second click action multi-level
22-10-2014A second click/tap action multi-level menu suitable for all the latest browsers and operating systems.
A responsive slide out/in
29-09-2014A universal slide in/out menu suitable for PCs, tablets and smartphones using just CSS.
A responsive slide down/up
03-09-2014A responsive slide down/up droplist menu suitable for PCs, tablets and smartphones using just CSS.

Responsive menus

A responsive droplist
23-04-2013A responsive droplist menus that works in all modern browser including touch screens, iOS and Android OS. No javascript
A responsive dropdown/flyout
26-04-2013A responsive dropdown/flyout menu that works in all modern browser including touch screens, iOS and Android OS. No javascript
A responsive single level
07-05-2013A responsive single level menus that works in all modern browser including touch screens, iOS and Android OS.
A responsive droplist
03-10-2013A responsive droplist menu that works in all modern browser including touch screens, iOS, Android OS and smartphones.
A couple of responsive single level menus
04-10-2013Responsive single level menus that works in all modern browser including touch screens, iOS, Android OS and smartphones.
A responsive multi-level
03-02-2014A Responsive multi-level menus suitable for PCs, tablets and smartphones.
A second responsive multi-level
10-02-2014A second responsive multi-level menus suitable for PCs, tablets and smartphones using just one menu.
A responsive multi-level droplist
13-08-2014A responsive multi-level droplist menus suitable for PCs, tablets and smartphones using just CSS.
A responsive slide down/up
15-08-2014A responsive slide down/up menu suitable for PCs, tablets and smartphones using just CSS.
A responsive slide down/up
03-09-2014A responsive slide down/up droplist menu suitable for PCs, tablets and smartphones using just CSS.
A responsive slide out/in
29-09-2014A universal slide in/out menu suitable for PCs, tablets and smartphones using just CSS.
A responsive multi-level
16-12-2014A responsive click/tap multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A responsive droplist
10-01-2015A responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A second responsive droplist
20-04-2015A second responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A responsive fade in/out menu panel
23-04-2015A responsive fade in/out menu panel suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
A responsive multi-level menu
14-05-2015A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
A responsive multi-level menu
18-05-2015Another responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
A responsive multi-level menu
26-05-2015A responsive multi-level menu suitable for all browsers and OS, PCs, tablets and smartphones using a little jQuery.
A responsive slide down menu
19-09-2015A responsive slide down menu suitable for all the latest browsers, OS and devices without using media queries.
A responsive swipe-momentum menu
24-02-2016A responsive swipe action momentum menu suitable for all the latest browsers and OS.
A CSS ONLY click action slide in menu
29-10-2016A responsive multi-level slide in menu
A CSS ONLY click action concertina menu
24-11-2016A responsive multi-level concertina menu with bounce
A CSS ONLY click action tree menu
17-11-2016A responsive multi-level tree menu with slide action
A CSS ONLY click action tree menu v2
16-12-2016A second responsive multi-level tree menu with slide action
A CSS ONLY click action tree menu v3
21-01-2017A third responsive multi-level tree menu with slide action
A CSS ONLY click action menu v4
13-03-2017A fourth responsive multi-level menu with slide action
A CSS ONLY click action tree menu v5
24-04-2017A fifth responsive multi-level tree menu with slide action
A CSS ONLY click action tree menu v6
30-04-2019A sixth responsive multi-level tree menu.
A CSS ONLY click action tree menu v6b
01-05-2019A 6b responsive multi-level tree menu.
A CSS ONLY click action tree menu v6bb
01-05-2019A 6bb responsive multi-level tree menu.
A CSS ONLY click action tree menu v6c
04-05-2019A 6c responsive multi-level tree menu.
A simple responsive click action tree menu
04-08-2021A responsive CSS only simple tree menu.
A very simple responsive click action tree menu
07-08-2021A responsive CSS only simple tree menu without using radio/checkbox inputs.
A simple responsive checkbox tree menu
10-08-2021A responsive CSS only simple checkbox tree menu with transitions.

Menus suitable for iPhone/iPad/iPod

A dropdown
12-01-2011A single level dropdown menu for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A slide down
15-01-2011A single level slide down menu for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A flyout
19-01-2011A flyout menu for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A droplist
21-01-2011A droplist menu with delay action for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A droplist
23-03-2011A droplist menu with top level links suitable for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A flyout list
22-01-2011A flyout list menu with delay action for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A flyout list
19-03-2011A flyout list menu for Safari Mobile browsers with top level links.
A flyout icons list
25-01-2011A flyout list of icons for Safari Mobile browsers (iPhone, iPad and iPod Touch).
A 'exploding images'
10-02-2011An exploding stack of image links, suitable for the iPhone, iPad and iPod Touch.
An image fix for closing sub menus
06-04-2011Using an image to close sub menus on the iPhone, iPad and iPod Touch.
An 'anywidth' multi level
07-06-2011An 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch.
An 'anywidth' multi level
09-06-2011A version 2 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch.
An 'anywidth' multi level
07-10-2011A version 3 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques.
An 'anywidth' multi level
31-10-2011A version 4 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques.
An 'anywidth' multi level
31-10-2011A version 5 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques.
An 'anywidth' multi level
19-04-2012A version 6 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques with no 'close' button.
An 'anywidth' multi level
30-10-2012A version 7 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the new technique to close an open sub menu.
A slidedown
11-06-2011A single level slidedown menu for the iPhone, iPad and iPod Touch.
A slide/hide
13-06-2011A multi level slidedown/flyout menu with animation for the iPhone, iPad and iPod Touch.
A droplist
25-06-2011A droplist menu with slide action and pushdown for the iPhone, iPad and iPod Touch.
A drop panel
25-08-2011A drop panel menu with multi configurations, suitable for the iPhone, iPad and iPod Touch.
A dropdown
11-09-2011A dropdown menu with click open/close, suitable for the iPhone, iPad and iPod Touch.
A vertical concertina
04-10-2011A vertical conertina menu with click open/close and slide action, suitable for the iPhone, iPad and iPod Touch.
Vertical concertina menu #2
10-09-2012A vertical conertina menu with click open/close and slide action version #2
A single level dropdown
06-10-2011A single level dropdown menu with click open/close using a new technique for bug fixes in IE and the iPad.
A single level dropdown
02-04-2012A single level dropdown menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
A multi level flyout
18-04-2012A multi level flyout menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
A slide up / dropdown
17-09-2012A slide up/ dropdown animated menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
A slide down / concertina
18-01-2013A slide down / concertina animated menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
A vertical slide concertina
26-08-2014A vertical slide concertina menu suitable for all modern browsers and OS including touch screens and smartphones.

Menus suitable for touch screen devices

Multi-level menu for touch screen #1
20-03-2013Using the latest techniques to produce a multi-level menu that works on touch screens including Android OS
Multi-level menu for touch screen #2
21-03-2013A second method of producing a multi-level menu that works on touch screens including Android OS
Droplist menu for touch screen
22-03-2013A droplist menu that works on touch screens including Android OS
Flyout menu for touch screen
25-03-2013A flyout menu that works on touch screens including Android OS
Dropline menu for touch screen
02-04-2013A dropline menu that works on touch screens including Android OS
Vertical concertina menu for touch screen
08-04-2013A vertical concertina menu that works on touch screens including Android OS
A simple menu suitable for smartphones
24-06-2013A mini menu suitable for PC, Mac, Android browsers and smartphones.
A Windows 8 'Metro' style
08-07-2013A Windows 8 'Metro' style menu suitable for all modern browsers including touch screens.
A smartphone mini
15-10-2013A multi level mini menu suitable for smartphones.
A universal mini
17-10-2013The previous menu adapted to show how it will work on PCs as well as tablets and smartphones.
A PC, tablet and smartphone
04-11-2013A multi level menu suitable for PCs, tablets and smartphones.
A PC, tablet and smartphone menu v2
02-12-2013A second multi level menu suitable for PCs, tablets and smartphones.
A droplist menu with animation
27-01-2014A droplist menu suitable for touchscreen devices with animation.
A vertical concertina menu with animation
29-01-2014A vertical concertina menu suitable for touchscreen devices with animation.
A 3D mega menu with animation
25-03-2014A 3D mega menu suitable for touchscreen devices with animation.

CSS3 menus using animation

CSS3 slide
24-01-2010Using CSS3 to produce a slide down/slide up menu with radius corners and drop shadow.
CSS3 fade
25-01-2010Using CSS3 to produce a fade-in menu with radius corners, drop shadows and gradient fills that degrades well in all browsers.
CSS3 fitted tabs
29-01-2010Using CSS3 to produce fitted tabs with no graphics and no extra markup.
CSS3 general sibling problem
31-01-2010Using CSS3 to produce a sliding hover background indication - problem in Safari and Chrome
CSS3 slide up/down lists
31-01-2010Using CSS3 to produce a slide up and slide down multi-column lists
CSS3 'Drop Everything'
06-02-2010Using CSS3 to produce a sub menu system that can contain any information.
CSS3 IE dropdown
16-02-2010Using Microsoft filters and CSS3 to produce a dropdown menu with gradient fill and drop shadow.
CSS3 Zoom
17-04-2010Using CSS3 transitions to produce a smooth zoom menu.
CSS3 Background Image Change
17-04-2010Using CSS3 transitions to produce a smooth background image and color change.
CSS3 Slide Out Vertical
30-04-2010Using CSS3 transitions to produce a smooth slide out effect for the top level and sub menu.
CSS3 single level slideout
03-05-2010Using CSS3 transitions to produce a smooth single level slideout menu with sliding icons
CSS3 slidedown list
16-07-2010Using CSS3 transitions to produce a slide down/up and fade in/out list menu
CSS3 horizontal image slide
23-09-2010Using CSS3 transitions to produce a horizontal sliding image menu to rival any jQuery version.
CSS3 vertical image slide
24-02-2011Using CSS3 transitions to produce a vertical sliding image menu to rival any jQuery version.
CSS3 Rising Tabs
26-09-2010Using CSS3 transitions and TIME to produce a vertical sliding panels menu to rival any jQuery version.
CSS3 Social Network
28-09-2010Using CSS3 to produce a circle of social networking icons on hover.
CSS3 Slide down/fly
19-11-2010Using CSS3 to produce a slide down / slide fly animated menu.
CSS3 left/right slide
01-12-2010Using CSS3 to produce a left/right slide animation.
CSS3 dropdown slide animation
06-01-2011Using CSS3 to produce a dropdown with slide animation.
CSS3 icon slide slide animation
19-01-2011Using CSS3 to produce a sliding icon menu.
CSS3 photo information panels
07-02-2011Using CSS3 to produce a set of sliding information panels for photos.
CSS3 Slide/Animation Pullup
09-02-2011Using CSS3 to produce a sequence of image animations and a slide down sub menu system
CSS3 Expanding Slide Down
20-02-2011Using CSS3 to produce a set of panels that expand on hover with a slide down sub menu.
CSS3 Book Shelf
21-02-2011Using CSS3 to produce an animated bookshelf menu.
CSS3 3D Rollover
27-02-2011Using CSS3 to produce a 3D Rollover Menu.
CSS3 3D Social Network Ring
06-03-2011Using CSS3 to produce a 3D Rotating Social Network Ring of icons with reflections.
CSS3 animated
14-04-2011Using CSS3 to produce an animated dropdown menu that looks like jQuery.
CSS3 click multi-dropline
15-04-2011Using CSS3 to produce a multi-dropline menu with click action.
CSS3 styled horizontal menus
16-04-2011Using CSS3 to style unordered lists with gradient fills and inner/outer shadows.
CSS3 Flower
07-05-2011Using CSS3 to style the petals on a flower.
CSS3 Playing Card
11-05-2011Using CSS3 to style a set of playing cards.
CSS3 Icon Zoom
22-06-2011Using CSS3 to animate (zoom/fade/skew) a set of icons.
CSS3 Text Zoom
22-06-2011Using CSS3 to animate (zoom) a vertical text menu.
CSSplay Stepped Zoom
21-11-2012Using CSS3 to step animate a vertical text menu.
CSS3 lightbox
03-07-2011Using CSS3 to animate a 'lightbox' type menu.
CSS3 headline changer
03-09-2011Using CSS3 keyframes to produce a healine changer.
CSS3 Slide Out
24-09-2011Using CSS3 transitions to produce a simple slide out animation.
CSS3 search box stretch
01-11-2011Using CSS3 transitions to produce a simple stretch feature to a search box.
CSSplay Stretch Drop» 02-12-2011Using CSS3 transitions to produce horizontal stretch/droplist menu.
CSSplay Slide/Fly
21-12-2011Using CSS3 transitions to animate a slide/fly manu with image 'bounce'.
CSSplay 3D Flip Down
10-03-2012Using CSS3 3D transforms to produce a flip down menu.
CSSplay 3D Unfolding
03-03-2012Using CSS3 3D transforms to produce an unfolding menu.
CSSplay 3D Flip Down
03-02-2013Using CSS3 3D keyframes and transitons to produce a flip down menu that works in IE10.
CSSplay dropdown menu with persist
17-10-2012Using CSS3 to produce a hover dropdown menu with sub menu persist.
CSSplay dropdown menu suitable for IE10 touch screen
12-02-2013A method of getting a multi-level dropdown/flyout menu working on touch screen devices running IE10
CSSplay droplist menu suitable for IE10 touch screen
14-02-2013A method of getting a droplist menu working on touch screen devices running IE10
CSSplay information panels suitable for touch screen devices
19-03-2013A set of information panels suitable for IE10, iPad etc., and Android OS, touch screen devices.

Click action menus

A CSS click action multi-level
12-03-2011At last a multi-level dropdown flyout menu using mouse clicks instead of hovers.
A CSS click action multi-level
27-04-2012The previous menu updated to work on the iPad etc. and remove the requirement for links in items with sub menus.
A CSS click action multi-level menu version 2
02-11-2012The previous menu updated to improve the usage on the iPad.
A CSS click action dropline
13-03-2011A dropline menu using mouse clicks instead of hovers.
A CSS click action flyout
14-03-2011A flyout menu using mouse clicks instead of hovers.
A CSS click action vertical slide
15-03-2011A vertical slide menu using mouse clicks instead of hovers.
A CSS click action vertical concertina
05-04-2011A vertical concertina menu using mouse clicks instead of hovers.
A CSS click action droplist
15-07-2011A droplist menu using mouse clicks instead of hovers.
A CSS click open/close action dropline
04-12-2011A dropline menu using :target to open/close the droplines.
A CSS click action horizontal accordian
29-02-2012A horizontal click action accordian menu with permanent changes.
A CSS click action horizontal media accordian
01-03-2012A horizontal click action multi media accordian menu with permanent changes.
A CSS ONLY click action dropdown/flyout
24-06-2012A click action to open and close sub menus.
A CSS ONLY click action dropdown/flyout menu #2
26-06-2012A click action to open and close sub menus alternative.
A CSS ONLY click vertical concertina
26-06-2012A click action to open and close concertina menu with persist and accessibility.
A CSS ONLY click dropline
27-06-2012A click action to open and close dropline menu with persist and accessibility.
A CSS ONLY click action tree
27-06-2012A click action tree menu using just CSS.
A CSS ONLY click action left/right slide
12-10-2012A click action menu with horizontal sliding panels.
A CSS ONLY click action multi-level
24-02-2014A click/tap action multi-level menu suitable for touch-enabled devices including Windows 8/8.1 and IE10/11.
A second CSS ONLY click action multi-level
22-10-2014A second click/tap action multi-level menu suitable for all the latest browsers and operating systems.
A CSS ONLY click action flexbox menu
13-05-2016An accordion menu using flexbox and order animation.
A CSS ONLY click action slide in menu
29-10-2016A responsive multi-level slide in menu

Multi-level - the original

Cross browser drop-downThe original drop-down menu that started this group.

Multi-Level - Flyout

Cross browser flyout menuA flyout menu that works in IE using ONLY CSS.
Simple 4 level flyout
28-07-2006A much simplified version of the flyout menu.
Another flyout
16-10-2006Another version of the flyout menu.
A flyout menu with overlap
24-10-2006A flyout menu that has ovelapping submenus.
Five level overlap & overrun
19-03-2007A four sub-level with overlap and overrun.
A simple multi-line flyout
03-12-2009A simple multi-level flyout with multi-line text.
A basic flyout
05-08-2009A basic flyout with anywidth sub levels.
A basic flyout menu using timeactiion
08-01-2011Using Microsoft timeaction (TIME) instead of conditional comments nd tables for IE6
A basic flyout menu with breadcrumb trail
05-08-2009A basic flyout with anywidth sub levels and a breadcrumb trail.
Any width flyout
28-04-2009A flyout with flyout sub levels any width.
Any width flyout menu with overrun
96-05-2009A flyout with flyout sub levels any width and over run.
Simple 4 level left flyout
02-09-2006A left flyout version of the simplified menu.
Flyout graphic menuA single level fly-out using images.
A 5 level flyout
21-08-2007An improved 5 level flyout with a difference.
Flyout menu with breadcrumb trail
30-07-2008A flashy flyout menu with a current page indicator.
Vertical menu with flyout lists
02-09-2009A vertical menu with two level flyout lists.
Vertical menu with flyout multi-column lists
15-12-2009A vertical menu with flyout lists of up to three columns.
Flyout over Flash
29-02-2007A flyout menu over Flash object.
It could have been this simple
01-09-2006How simple a fly out menu could have been.
It could have been this simple mkII
02-09-2006How simple a dropdown/fly out menu could have been.

Multi-Level - Dropdown

Validating drop-down menuThe second version of the drop-down/flyout menu.
Basic drop-down menuThe basic single level drop-down .
Cross-browser pull-up menuBased on the drop-down/flyout this one pulls-up.
A simplified pull-up
03-09-2006A simplified pull-up menu with 2 fly-outs.
Artists drop-down menuA drop-down with associated text.
An image dropdown
28-01-2008A menu using images in place of text.
A simple image dropdown
24-11-2009A simple dropdown menu using images in place of text.
A more complex image dropdown
25-11-2009A more complex dropdown menu using png images in place of text.
An image rollover
25-04-2010A dropdown menu with top level rollover images.
Ultimate dropdown menuThe final drop-down/fly-out menu.
Ultimate menu v2
27-07-2006One more improvement on the previous menu
An improved drop
20-10-2006A further improvement to the drop-down menu
A drop menu with overlap
25-10-2006A small change to the drop-down menu to include overlapping of the sub menus
A drop menu with overrun
30-12-2006A drop down menu with overlap and overrun
A tab menu with overrun
09-03-2007A tab drop down menu with overlap and overrun
A six level menu with overrun
22-03-2007A simple drop down menu with overlap and overrun
The previous menu centered
29-04-2007Centering the simple drop down menu with overlap and overrun
Simple multi-line dropdown
08-12-2009A variable width top level list with multi-line fixed width sub menus.
Variation on a drop-downA single level drop-down menu with transparency.
Drop-down examplesA series of 'web ready' menus using drop-down techniques.
A drop lists
04-05-2007A menu with drop lists
A paged
10-06-2007A menu to select page information
Another paged
11-06-2007Another menu to select page information
A single page website using :target
18-11-2011A single page website using :target and the general sibling selector to keep the selected page on screen
Drop-down scrolling
05-03-2007A dropdown menu with scrolling.
Drop-down scrolls
23-05-2007A dropdown 'scrolls' menu.
Zig-zag
26-07-2007A drop down zig-zag menu.
Lozenge
26-07-2007A drop down lozenge shaped menu.
Shutter
03-08-2007A drop down 'shutter' menu.
Professional drop-down
28-08-2007A drop-down menu using top level images.
Professional drop-down #2
02-10-2007Drop-down menu using top level text.
Professional drop-down #3
04-10-2007Drop-down menu using top level text.
Professional drop-down #4
06-10-2007Variable width drop down.
Professional drop-down #5
13-10-2007Image drop down.
CSS image map
01-11-2009A dropdown menu with a top level image map and rollover
Professional drop-down #6
24-11-2007Drop-down menu with dividers and section headings.
Professional drop-down #7
24-01-2008Drop-down menu with current drop line.
Professional drop-down #8
24-01-2008A fix for the IE6 select box bug using an iframe shim.
Professional drop-down #9 3D series
02-03-2008A series of dropdown menus with a 3D appearance.
Professional drop-down #10 3D series
04-03-2008The second in the series of dropdown menus with a 3D appearance.
Professional drop-down #11 3D series
16-03-2008The third in the series of dropdown menus with a 3D appearance with full png transparency.
Professional drop-down #12 3D series
08-09-2008The fourth in the series of dropdown menus with a 3D appearance with full png transparency.
Professional drop-down #13 png series
14-09-2008Dropdown menu with full png transparency.
Professional Drop List Menu #14
05-01-2011Drop List menu with curved corners and drop shadows.
Professional image drop-down
04-09-2007A drop-down menu using sliding doors and text.
Professional dropdown
06-02-2009A centered drop-down menu with flyout images
Centered dropline/dropdown/flyout
08-02-2009A sliding doors tabbed centered multi level menu.
Skeleton drop-down
09-11-2007A skeleton menu with variable width drop-down and flyout sub levels.
Skeleton drop-down menu #2
01-12-2007A second skeleton menu with variable width drop-down and flyout sub levels.
Skeleton drop-down menu #3
23-01-2009A third skeleton menu which solves the centering problem with float left menus.
Skeleton drop-down menu #4
30-04-2009A fourth skeleton menu which has been completely restyled so that it works correctly in all browsers.
A CSS dropdown menu with override
02-11-2009A CSS dropdown menu with current page selection and override.
Simple Elegant dropdown #1
06-11-2008A simple but elegant dropdown menu with style.
Simple Elegant dropdown #2
16-11-2008A simple dropdown with a twist.
Variable width dropdown menu #3
13-10-2008A variable width drop-down and flyout sub level menu.
Variable width dropdown menu #4
15-10-2008A variable width drop-down and flyout sub level menu and no conditional comments in the html.
Variable width dropdown menu #5
17-10-2008A variable width drop-down and flyout sub level menu, no conditional comments and the select box bug fix.
Any width dropdown
27-04-2009A variable width drop-down and flyout sub level menu with no IE6 hacks
Any width dropdown menu v2
30-04-2009A variable width drop-down and flyout sub level menu version 2
Any width dropdown menu - black
23-10-2009A variable width drop-down menu in shades of grey/black
Any width dropdown left/right v2
20-05-2009A variable width drop-down and flyout sub level with left/right options
Any width dropdown centered/centered
12-06-2009A variable width drop-down menu with top level and sub menu centered
Any width dropdown/flyout centered/centered
15-06-2009A variable width dropdown/flyout menu with top level and sub menus centered and left/right flyouts
Any width pullup
23-07-2009A variable width pullup/flyout menu with top level centered and left/right flyouts
A dropdown table
07-05-2009A dropdown menu that uses tables to hold the dropdown information
A multi-column dropdown
02-06-2009A dropdown menu that that has multi-column sub levels
A professional droplist
25-07-2009A droplist menu with multiple columns and horizontal 'extras' bar.
A professional droplist v2
17-08-2009The previous menu with additional dropline feature.
A professional droplist with flyout sub menus
07-07-2010A droplist menu with additional flyout sub menus.
A professional image droplist
18-08-2009A droplist menu using image and text blocks for the top level.
A professional image dropdown information
02-12-2009A dropdown menu using png images for the top level and an information dropdown.
A professional Select List
13-03-2010A single level select list menu with current page override
A CSS3 Dropdown
05-08-2010A dropdown menu with a twist and CSS3 enhancements.
Iframe select box fix
13-05-2008An easy fix for the IE6 select box bug, where dropdown menus appear behind the form select boxes.
Iframe select box fix #2
03-09-2008A second fix for the IE6 select box bug, where dropdown menus appear behind the form select boxes.
Iframe select box fix #3
03-09-2008A third fix for the IE6 select box bug, where transparent dropdown menus appear behind the form select boxes.
Iframe select box fix #4
01-05-2009A fourth fix for the IE6 select box bug, where the menu has variable width dropdown/flyouts.
Fly-out examplesA series of 'web ready' menus using fly-out techniques.
Slide and Fly
27-12-2007A vertical slide with flyout sub menus.
Flexbox droplist
06-03-2014A droplist menu using flexbox to simplify code and styling.

Multi-Level - Dropline

Validating drop-line menuA drop-down horizontal menu using only CSS.
Validating drop-line menu v2
11-10-2006Another drop-down horizontal menu using only CSS.
Doors drop-line
13-01-2007A sliding doors drop-down horizontal menu.
Doors drop-line menu two
26-01-2007Another doors drop-down horizontal menu.
Doors drop-line menu three
26-01-2007One last doors drop-down horizontal menu.
Simple dropline
18-07-2007A very simple drop line menu.
Professional drop line
07-09-2007A professional drop line menu using centered sliding doors.
Professional drop line menus
26-09-2007A set of 4 professional drop line menus.
Professional drop line menu #6
25-08-2008A 6th professional drop line menu.
Professional drop line menu #7
22-09-2008A 7th professional drop line menu.
Professional drop line menu #8
05-10-2008A 8th professional drop line menu.
Professional drop line menu #9
26-11-2008A 9th professional drop line menu.
Professional dropline/dropdown hybrid
09-12-2007Professional dropline/dropdown menu.
Professional dropline/dropdown/flyout hybrid
12-02-2008Professional dropline/dropdown/flyout menu.
Professional dropline/dropdown/flyout hybrid v2
12-07-2009Professional dropline/dropdown/flyout menu version 2.
Professional left/right dropline
09-12-2007A dropline menu split into two halves
Professional drop tab
12-09-2007A professional drop tab menu using centered sliding doors.
Professional dropline image
07-04-2009A professional dropline menu with horizontal scrolling images.
Anywidth dropline with centering
13-06-2009A professional dropline menu with anywidth centered top list and dropline.
Anywidth dropline/dropdown with centering
28-07-2009A professional dropline/dropdown menu with anywidth and all levels centered.
Dropline menu with override
30-03-2010A professional dropline menu with current page selection option and override on hover.
Dropline menu with overrun
02-08-2010A professional dropline menu with overrun area and adjacent link avoidance.
Dropline/dropdown
19-01-2012A professional dropline/dropdown menu with current page options.

'Push-Pull' - Dropline

NEW dropline menu system
14-01-2010A totally new dropline menu system using no hacks and no javascript
'Pullover' sub line
15-01-2010A 'Pullover' sub line menu using the new no hacks system
'Showup' sub line
22-01-2010A 'Showup' sub line menu using the new no hacks system

Multi-Level - Fly line

Flyout transparent menuA fly-out single line with transparency.
Flyout/dropdown menuA fly-out line with drop-down.
Professional fly-line menu #1
06-10-2008A professional fly-line menu #1.
Professional fly-line/drop
27-07-2010A professional fly-line / dropdown menu with CSS3 animation.
Professional slide line
27-07-2010A professional slide line menu with CSS3 animation.

Multi-Level - Drill Down

Drill down menu system
30-05-2010A CSS only answer to javascript drill-down menus.
Drill down menu system v2
17-11-2011A CSS only answer to javascript drill-down menus - without being 'fixed'.
Drill down menu system v3
06-07-2012A CSS only answer to javascript drill-down menus without using :target.
Drill down menu system #4
12-02-2014A CSS only drill down menu that works in all modern browsers using 'checkbox' toggle to open/close sub menus.

Multi-Level - Pull Down

Pull down menu system
02-01-2011A CSS only answer to javascript/jQuery pull down menu panels.
Pull down information panel
04-01-2011A CSS only answer to javascript/jQuery pull down information panel.
Pull down panel with dropdown
28-03-2011A CSS only pull down panel with dropdown menu suitable for iPad.

Multi-Level - Concertina

Concertina Slide
30-10-2008A vertical concertina menu.
A vertical accordion
05-03-2014A vertical accordion menu using flexbox styling.
Sliding menu with current page override
29-10-2009A vertical sliding menu with the ability to override any 'current page' styling.
Concertina
28-06-2008A horizontal concertina menu.
Concertina library bookshelf
07-11-2008A concertina bookshelf menu.
Vertical concertina
11-08-2008A vertical concertina menu.
Vertical concertina scroll
28-01-2009A vertical concertina menu with scrolling sub menus
Vertical slide menuA vertical push-down menu using just CSS.

Float/drop menu system

New dropdown menu system
07-09-2009An all NEW method of producing a cross-browser dropdown menu.
Definition list dropdown
08-09-2009Using a definition list makes the styling much simpler
Dropdown button
14-12-2009A single level dropdown button menu using just html and CSS - no hacks.
Definition list slide
09-09-2009A vertical slide menu using the no hacks menu system
Definition list click
01-10-2009A vertical click to slide menu using the no hacks menu system
Definition list flyout
15-09-2009A vertical flyout menu using the no hacks menu system
Definition list fly left
16-09-2009A vertical fly left menu using the no hacks menu system
Definition list pullup
18-09-2009A horizontal pullup menu using the no hacks menu system
Unordered list dropdown
20-09-2009A horizontal unordered list dropdown menu using the no hacks menu system
Unordered list multi level
20-09-2009A horizontal unordered list multi level menu using the no hacks menu system
Unordered list multi level menu v2
21-12-2009A horizontal unordered list multi level menu using the no hacks menu system and png images
Unordered list multi level menu v3
22-12-2009A horizontal unordered list multi level menu version 3
Unordered list multi level menu v4
23-12-2009A horizontal unordered list multi level menu version 4 using click action
Unordered list multi level menu v5
24-12-2009A horizontal unordered list multi level menu version 5 with variable width levels.
Unordered list multi level menu v6
24-12-2009A horizontal unordered list multi level menu version 6 with manually adjustable widths in all levels.
Unordered list multi level menu v7
27-12-2009A horizontal unordered list multi level menu version 7 with manually widths - centered.
Unordered list multi level menu v8
01-01-2010A horizontal unordered list multi level menu version 8 with highlight through menu.
Unordered list multi level menu v9
05-01-2010A horizontal unordered list multi level menu version 9 with highlight through menu restyled.
Unordered list multi level menu - snowstorm
11-01-2010A minimum styled horizontal unordered list multi level menu with highlight through menu.
An image dropdown
21-01-2010A dropdown image box menu with top level images.
An image float-drop
12-06-2010A dropdown/flyout menu using float/drop, with background images and breadcrumb trail.
An image float-drop
15-06-2010Another dropdown/flyout menu using float/drop, with full background images and breadcrumb trail.
An image float-drop
29-12-2010An image dropdown menu with tooltips.
Unordered list multi level flyout
20-12-2009A vertical unordered list multi level flyout menu using the no hacks menu system
Unordered list multi level flyout menu v2
29-12-2009A multi level flyout menu using the no hacks menu system with highlighted path through the menu.
A Multi-column dropdown
31-12-2010Using float/drop techniques to produce a multi-column dropdown menu.

Basic text only - single level

CSSplay Revolver
04-12-2011Using the :before and :after pseudo-elements to create an animated rollover menu.
Menu oneA simple change of border style on :hover.
Menu twoA border style to look like a button.
Menu threeA neon glow menu.
Menu fourA right border change on :hover.
Menu fiveText movement on :hover.
Menu sixBorder art to indicate the link on :hover.
Menu sevenAdditional link text on :hover.
Menu nineA shadow added on :hover.
Menu tenIndented text on :hover.
Menu eleven45 degree slant using border art.
Menu twelveImage rollover effect.
Menu fourteenA border art pointer on :hover.
C1sissy's menuBoth horizontal and vertical links
A 45° slant
07-02-2007A tab menu with sloping edges.
A centered top pointer
18-04-2007A menu with a top pointer indicator.
A tab highlight
19-04-2007A menu with a tab highlight and shaded base.
Two point gradient
25-04-2007A menu with two points and gradient background.
Professional horizontal series
23-08-2007A series of professional horizontal menus
A hexagonal
29-07-2007A hexagonal shaped menu with transparent borders.
A CSS3 hexagonal
02-06-2012A hexagonal menu with no extra markup and no images.

Circular pattern menus

A circular
09-11-2008A circular menu using background images.
A circular menu with sub menus
10-11-2008The previous menu with sub menu icons.
Circular menu with sub menus squared
14-04-2011Squaring the circle and adding CSS3 animation.
Circular icon
18-07-2011Circular menu with circular sub menus and CSS animation.
A circular menu
11-07-2017An update to the previous menu.
Circular quadrant icon
05-06-2012Circular menu divided into four quadrants.
A CSS3 ring
05-06-2012A ring of links using CSS3.
A CSS3 ring menu version 2
30-06-2012A ring of links using CSS3 for all modern browsers.
A CSS3 radial
07-06-2012Animated radial menu using CSS3.
A CSS3 circular icons
14-06-2012Animated circular icons menu using CSS3.
A CSS3 Pie
02-07-2012A CSS pie menu with individual sectors and icons.
A CSS3 Corner
05-10-2012A CSS circular corner menu.
A CSS3 Iris
25-06-2013A CSS iris/diaphragm menu.
A CSS3 Ring
17-02-2014A CSS ring menu with zoom toggle to open and close.
A team information demo
18-02-2014A method of displaying team photographs with information.
A circular menu with bounce
09-03-2016A CSS only circular menu with bounce animation using cubic-bezier animation timing

Tutorials

Button menu tutorialHow to style a list of links.
:hover craft tutorial
17-09-2006Working with :hover on links and lists
Basic Float/Drop Tutorial
18-07-2010The workings of the Float/Drop menu system explained.

Tabbed single level menus

Menu eightChamfered corners on your link boxes.
Menu thirteenChamfered corners using border art.
Fitted doorsUsing three images to allow resizing of text.
Fitted doors NO imagesAs above but using border art.
Fitted tabs NO images
22-08-2006As above but fully radiused.
Tab menu with pointerA horizontal list with an indicating pointer.
Centering a 'float left' menuCentering float left menus of known and unknown widths.
Horizontal non floatingHorizantal lists without using floats.
Centering horizontal unordered lists
31-07-2009The latest method of centering unknown width horizontal unordered lists.
A hidden tab menuA hidden menu using a single tab to reveal.
Hidden tab menu take two
05-01-2007A follow on from the previous menu.
Sliding doors
06-01-2007100% clickable sliding doors tabs.
Divide line problem fixed
24-08-2009A method of fixing a vertical divide line problem.
Centered sliding doors
02-02-2007100% clickable sliding doors - centered
Centering float:left; menus
10-04-2007How to get those float left menus to center on the page
Mini tabbed pages
09-02-2007A set of six mini tabbed pages
Mini tabbed pages version 2
27-07-2009A set of six mini tabbed pages with a current selection open
Ovelapping tab
13-02-2007A simple overlapping tab menu
Ovelapping tabs type 2
16-02-2007Another overlapping tabs
Ovelapping tabs type 3
17-02-2007Overlapping tabs using png
Ovelapping gif tabs
18-02-2007Overlapping tabs using gif
Vertical gif tabs
19-02-2007Vertical tabs using gif
Vertical gif tabs v2
23-02-2007Vertical tabs v2 using gif
CSS3 Animated tabs
31-07-2010Using CSS3 to produce a 'javascript' quality animated menu with NO graphics.
Side tabs
25-03-2007Side tabs with semi-transparent flyouts
Pull tabs
19-10-2007Pull down tabs menu
Slide tabs
08-09-2010CSS3 and time:animate sliding panels

Button single level menus

Menu fifteenA three state menu using a single background image.
ULTIMATE buttonsA realistic button menu using border art.
Definition list v2Definition list buttons using border art.
Rocker switch styleDefinition list racker buttons using border art.
MS buttons
17-05-2007A buttons menu similar to MS buttons
Shrink-wrap buttons
27-05-2007Shrink-wrapping buttons
Shrink-wrap buttons
29-05-2007Shrink-wrapped buttons menu
A neon
20-05-2007A neon tube menu
Another neon
25-05-2007Another neon tube menu

Image replacement menu

png image replacement
18-11-2009A method of replacing link text with png images that works in IE6 and degrades well with images off etc.

Inline/Drop menu system

Inline/Dropdown menu system
21-07-2010A totally NEW menu system for variable width dropdown menus. NO hacks or javascript.
Inline/Dropline menu system
21-07-2010Variable width dropline menu. NO hacks or javascript.
Inline/Flyout menu system
22-07-2010Variable width flyout menu. NO hacks or javascript.

Menus for all except IE6

Basic dropdown
24-07-2010A series of menus for all browsers except IE5.x and IE6.

HTML + TIME Menu system suitable for IE

HTML + TIME Dropdown
12-09-2010Using HTML + TIME to produce a dropdown menu that works in IE5.5 and IE6 without 'hacks'.
HTML + TIME Flylist
21-09-2010Using HTML + TIME to produce a flylist menu that works in IE5.5 and IE6 without 'hacks'.

Menus using definition lists

Definition list menuStyling a definition list with curved corners.
A drop-down definition list
03-11-2006Using definition lists to make a drop-down menu.
Another drop-down definition list
04-11-2006Styling all the links on a drop-down list.
A final drop-down definition list
05-11-2006Combines a drop-down with snazzy borders.
One last drop-down definition list
16-11-2006One final version with wider drop down.
Variable width drop-down definition list
30-11-2006A variable width drop down definition list menu.
An opaque drop-down definition list
18-12-2006An opaque drop down definition list menu.
A definition list
09-08-2012A definition list menu suitable for the iPad etc..
A horizontal slide definition list
08-09-2012A diagonal horizontal sliding definition list menu suitable for the iPad etc..
A flyout definition list
07-11-2006A flyout version of the drop-down definition list style
A sliding definition list
28-12-2006A vertical slide version of the drop-down definition list

Menus just for fun

Coded list of spiesA fun menu using jumbled letters.
Horizontal vertical menuVertical links placed horizontally.
An unordered list with link imagesLinks with pop-up images and link lines.

No flicker menus

Flicker free :hoverUsing text image replacement without flicker.
Flicker free mk2Another method of image replacement without flicker
Flicker free mk3A final method of image replacement without flicker.

Menus with curved border - pre border-radius

Snazzy menuA resizeable tab menu without images.
More snazzy menusTwo more tab menus using border art.

Menus with sliding action

Sliding tabs menuA vertical sliding menu system with images and text.
horizontal sliding menuA horizontal version of the above menu.
a vertical sliding sub-menuUsing page jumping to navigate.

Menus with no active/focus border

Non-rectangular linksLinks in a cross shape.
Jigsaw linksLinks in the shape of jigsaw pieces.
Circular linksLinks in a circular shape.
Letter linksLinks styled to look like letters.
Olympic linksInterlocking links.
Basic dotted line replacement tutorialHow to remove the ative/focus dotted lines.

Magnifying menus

Enlarging unordered listLink enlargement on :hover.
Enlarging unordered list mk.II
05-08-2007Link enlargement with shadow.
Magnifier menuA graduated text magnifier on :hover using images.
Image magnifier menuEnlarging link images on :hover.
Exploding menuExploding images into four identical images on :hover.
Magnifier text menuAs the first menu in this group, but using only text.

Purely experimental

Experimental menu #1
10-08-2007An experimental drop down menu #1
Experimental menu #2
10-08-2007An experimental drop down menu #2
Experimental menu #3
10-08-2007An experimental drop down menu #3
Experimental menu #6
17-08-2007An experimental drop down menu #6
Experimental menu #7
18-08-2007An experimental drop down menu #7
Experimental menu #11
08-08-2008Horizontal scrolling images menu
A slide up/down image
27-08-2009A menu with a sliding image effect on hover

Unusual menus

An image and associated text hover
09-04-2009A method of hovering over image OR text to highlight both.
Horizontal menu with total background hover changes
20-04-2009A link rollover to change the whole menu background image.
A Triple link block with rollover
17-06-2009A block of information containing 3 links and a highlight rollover image/text replacement.
A fisheye image
24-08-2009A fisheye image menu with dynamic expanding/contracting mouseovers.
A fisheye text
24-08-2009A fisheye text menu with dynamic expanding/contracting mouseovers.
A fisheye image
25-08-2009Another fisheye text menu with dynamic expanding/contracting mouseovers and text.
A fisheye image
26-08-2009Fisheye text menu adding the use of png images for IE6.
Zoom icon with sub
10-10-2009A zoom icon with a popup speech bubble sub menu.

Information

The above is an index of all my navigation menus which range from the very simple to the more advanced.

These menus all work in the latest versions of the most popular browsers but cannot be guaranteed to work in older browser version or some of the lesser known browsers.

I have received feedback from Mac owners on many of these menus so it is always worth checking to see if there are any known problems.

For these demonstrations to work in Internet Explorer please make sure that you are using a standards compliant doctype as the first line of your code. A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.

Support CSS play

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.

Copyright

Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Copyright © - Stu Nicholls CSSPLAY - All rights reserved