CSS - Cascading Style Sheets

CSS Tutorials, Articles, and Tips, Page 3

Lists, Menus, Navigation, and Rollovers

The CSS Menus Tutorials and Articles Tutorials section below has links to helpful CSS tutorials on creating CSS menus, CSS navigation tutorials and tips, styling lists, and related.

Within the other CSS Tutorials and Articles pages you'll find tutorials on CSS layouts and positioning, CSS articles and general CSS tutorials, and tutorials on centering with CSS, style sheets for print, how to use CSS shorthand properties, styling links with CSS, and more.

IE7 CSS Hacks, IE8 CSS Bugs, Bug Fixes, Solutions: Wondering what to expect with CSS and Internet Explorer 8? Want some information about conditional comments? Looking for IE7 CSS hacks? Going nuts with a browser problem with your CSS? Check out Solutions to CSS Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform CSS Issues.

On this page:

The Basics of Lists with HTML and CSS, Basic Techniques
Examples of Navigation, Navigation Menus using CSS
Dropdown, Flyout, Popup Navigation Menus with CSS
- Reviews, Overviews of Flyout, Popup Navigation Menus with CSS
Multi-Column Navigation with HTML Lists and CSS
Rollover Navigation Effects with HTML Lists and CSS
“Sliding Doors” Method of HTML Lists and CSS
“Sprites” Method of HTML Lists and CSS
Tabbed Navigation Look with HTML Lists and CSS
Other CSS Menus Links Resources

Also within CSS Tutorials:

Also within CSS - Cascading Style Sheets:

CSS - Cascading Style Sheets Home
W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, Cross-Browser, Cross-Platform CSS Issues (1 page)
CSS Sites, Resources, and Books (1 page)
CSS Templates (1 page)
CSS Tools - Editors, Reference Charts, Validators, and More (1 page)
CSS Discussion Lists, Newsgroups (1 page)

Visit VisiBone, our CSS section sponsor

The Basics of Lists with HTML and CSS, Basic Techniques

The Basics of Lists with CSS

Consistent List Indentation
Eric Meyer's excellent tutorial that explains how to handle indenting for lists that's consistent cross-browser and cross-platform. [08/30/2002 by Eric Meyer, meyerweb.com, originally for Netscape DevEdge.]
CSS Design: Taming Lists
Mark Newhouse's helpful tutorial for A List Apart. Covers how to effectively style lists with CSS — indenting, bulleted lists, positioning, list style, the before pseudo-element, inline lists, lists for navigation, borders, breadcrumb trails, and more. Editor note November, 2005: This tutorial turned into almost the standard for how to style lists with CSS. It's well-written and works well, too. You'll find many newer tutorials based on or springing off of this tutorial. [Tutorial dated 09/27/2002 by Mark Newhouse for A List Apart.]
CSS List Properties
W3Schools.com section about list items, including examples, explanations, how to create unordered and ordered lists, how to use CSS with list item elements. [Tutorials by W3 Schools.]

The Basics of and Techniques for Horizontal Navigation with HTML List Items and CSS

Inline elements and padding
“Have you ever tried to add padding to <li> elements that have been set to 'display: inline'? Did you find that the padding seemed to be rendering in an unusual way? ... To understand why this is happening, we need to look at the different ways that block level and inline elements treat properties such as width, height, padding and margins.” For example, the W3C states that the width, height properties do not apply to inline, non-replaced elements, but line-heightdoes apply to the height of the box. Read Russ Weakley's presentation to understand more of what does and doesn't apply and how you can achieve the results you need for your inline list navigation or other inline elements. Fabulous presentation that explains things in an easy-to-understand way. [Article/tutorial dated 11/19/2006, by Russ Weakley, Max Design.]
Turning a list into a navigation bar
Fabulous tutorial with easy-to-understand instructions and packed with code samples all along the way explaining how to create a horizontal navigation bar using CSS and HTML unordered list item elements, CSS floats, and much more. Explains all the basics but also adds nice touches such as transforming the text to uppercase, adding a drop shadow using CSS, more. Great tips here. [Article/tutorial dated 01/10/2005, by Roger Johansson, 456 Berea Street.]
Tutorial 6 - Floating inline list items
Step-by-step instructions on creating a horizontal navigation bar using CSS and HTML unordered list items. Great tutorial for learning and trying out this technique for floating list items with CSS. [Tutorial part of the Floatutorial series by Russ Weakley, Max Design.]

Horizontal and Vertical Navigation Techniques with HTML List Items and CSS

Listamatic
Using CSS and simple HTML lists, there are seemingly endless possibilities. Listamatic provides step-by-step instructions with well-written explanations so that you can learn all about how to create them yourself. This includes vertical and horizontal (inline) lists, and with or without images for bullets, or with or without bullets at all. In addition, though, is Listamatic's list auto-generator that will create your list markup for you. In addition are links to resources about CSS lists. Fantastic. Highly recommended. [Listamatic is by Russ Weakley, Max Design.]

Nested List Items and CSS

Listamatic 2
Adding to the above already fantastic Listamatic is Listamatic 2 that adds nested lists capability. Now there are even more seemingly endless possibilities! You'll find many different examples here along with the markup and CSS on how to do it for both vertical and horizontal nested lists. Just like Listamatic above, each has been cross-browser, cross-platform tested. In addition are links to resources about CSS lists. Also fantastic and highly recommended. [Listamatic 2 is by Russ Weakley, Max Design.]
List Inheritance and Descendant Selectors
Very helpful step-by-step demonstration to show how inheritance affects your nested list items. [Tutorial by Russ Weakley, Max Design.]

top ‘On this page’ menu

Examples of Navigation, Navigation Menus using CSS

Alsacreations: Examples and Menu Galleries in CSS and XHTML
Well done examples of navigation menus done with CSS and XHTML. Source code with explanations provided for use. See also several other tutorials at this site about creating various types of lists and navigation. Regularly updated. [Site by Raphael Goetter, Alsacreations.]

Dropdown, Flyout, Popup Navigation Menus with CSS

Below I've listed tutorials and CSS for CSS dropdown, flyout, popup navigation menus and CSS menu systems that validate to W3C CSS Recommendations.

For reviews of various approaches, see also below, Reviews, Overviews of Flyout, Popup Navigation Menus with CSS below.

For CSS Web Page templates, including CSS menu systems and templates, see CSS CSS Templates and Dreamweaver Dreamweaver Web Page / Web Site Templates.

A CSS Only Validating Flyout Menu - NO Javascript
A flyout menu system that provides two submenus from one of the main list items and one submenu on all the others. “This works in Internet Explorer as well as Firefox etc. and does NOT use javascript.” For IE6, you'll find conditional comments for a separate style sheet, and also included are conditional comments within the markup to add table element tags only for IE to make the menu work properly in IE without the need for a css.htc file or JavaScript. Free for personal use, donation requested for commercial use. [Article/tutorial dated 02/24/2006, updated 04/2006, by Stu Nichols, CSS Play.]
A Definition List flyout menu
Based on definition list items, this flyout menu “works in IE6, IE7, Opera 8.5, Opera 9, Firefox 2, Mozilla and Netscape etc. IE5.x will see the top level links only.” Free for personal use, donation requested for commercial use.[Article/tutorial dated 11/07/2006, by Stu Nichols, CSS Play.]
Creating Bulletproof Graphic Link Buttons with CSS
How to create “an image-based button that will expand and contract to fit the amount of text it contains.” [Article/tutorial dated 05/22/2007, by Roger Johansson, 456 Berea Street.]
Deluxe CSS Dropdowns and Flyouts
Demo with commented markup, CSS, and css.htc file. Uses a css.htc file for IE to work properly. Works for E5, IE5.5, IE6, Op7, Gecko, Konqueror, and Safari. [Article/tutorial dated 4/6/2005, updated 10/25/2006, by Holly and John, for Position is Everything.]
Drop-Down Menus, Horizontal Style
This drop-down menu (aka flyout menu - vertical menu with horizontal flyout to the right) uses only CSS and HTML, but also uses a little JavaScript ONLY for IE6, along with a helpful IE6 CSS fix for when the submenu is longer than the main menu. [Article/tutorial dated 06/29/2004, by Nick Rigby, for A List Apart.]
Hybrid CSS Dropdowns
Horizontal menu with two levels of dropdown capability (such as main topics and their associated pages). This menu will “allow for dropdown access to all pages in both navigation levels, display the current choices in the selected topic area constantly, keep the user aware of where he is in the site, and be clean and light to boot.” Uses a little JavaScript only for IE6 and a star (asterisk - *) hack for IE6. [Article/tutorial dated 03/30/2005, by Eric Shepherd, for A List Apart.]
Pure CSS Menus
Eric Meyer's Demo area with tutorial on how to create attractive navigation menus using CSS. [Tutorial dated 06/14/2002 by Eric Meyer, meyerweb.com.]
Pure CSS Popups
How to create menus with CSS that include popup text via rollover without using JavaScript - all CSS. [Tutorial dated 10/01/2001 by Eric Meyer, meyerweb.com.]
Sons of Suckerfish
Follow-up, expanded, and improved version of the popular Suckerfish Dropdowns that provides a lightweight, accessible, standards-compliant, cross-browser-compatible method for CSS dropdown menus. Uses JavaScript. By the same authors. [Article/tutorial dated 2003-2006, by Patrick Griffiths, Dan Webb, for HTML Dog.]
Suckerfish Dropdowns
Popular approach for a lightweight, accessible, standards-compliant, cross-browser-compatible method for CSS dropdown menus. See also Sons of Suckerfish by the same authors. Uses JavaScript. [Article/tutorial dated 11/07/2003, by Patrick Griffiths, Dan Webb, for A List Apart.]
Suckerfish Dropdowns - Keyboard Accessible
Just as the title says, this is a version of the popular Suckerfish dropdown menus that is keyboard accessible, unlike the original. It's also keyboard accessible with or without JavaScript, although keyboard accessibility won't work in IE with JavaScript turned off. [Article/tutorial dated 01/29/2005, by Matthew Carroll, carroll.org.uk.]

New and Popular Books on CSS
Recommended by WebsiteTips.com

Read reviews, why we recommend each book.

In association with

Reviews, Overviews of Flyout, Popup Navigation Menus with CSS

Dropdown low down
A must-read review of the pros and cons of 19+ available drop-down, flyout menus available online done with CSS, some with JavaScript, some with the csshover.htc file, some with CSS only. Bullet lists of pros and cons, accessibility issues, standards compliancy, and more. Great reference and resource! [Article/tutorial dated 12/04/2006, by John Faulds, Tyssen Design.]

top ‘On this page’ menu

Multi-Column Navigation with HTML Lists and CSS

Do You Want To Do That With CSS? - Multiple Column Lists
Learn how to create a list to display as multiple columns of list items, rather than as a single column or horizontal row. We used to have to do something like this with tables, but this tutorial shows how to achieve this using CSS. Easy to follow instructions, helpful examples, and downloadable files. [Article/tutorial by John Gallant, Holly Bergevin, for Community MX.]

top ‘On this page’ menu

Rollover Navigation Effects with HTML Lists and CSS

CSS Dock Menu
Tutorial and source files to create this Mac dock menu look as a horizontal menu for websites. Uses CSS, JS, HTML, and an HTC file as an IE fix. “If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.” [Article/tutorial dated 05/08/2007, by Nick La, N.Design Studio.]
CSS Fast rollovers, no preload needed
Clever and easy-to-follow approach to CSS rollovers that provides faster state changes by using only one image that invisibly changes position for hover state. [Tutorial dated 2003, by pixy.cz.]
CSS Fast Rollovers Without Preload - Updated
Follow-up to the clever CSS rollover approach by pixy, this solution by Marek Blaha eliminates the IE flickers problem that sometimes occur with background images. [Tutorial dated 11/27/2003, by pixy.cz.]
CSS Menus: Uberlink CSS Rollovers
Fantastic tutorial by Al Sparber about CSS menus using list items. Includes how to create a navigation menu as a block list or as an inline list. Exceptional. [Tutorial dated 2003, by Al Sparber, Project Seven.]

CSS Sliding Doors: “Sliding Doors” Method of HTML Lists and CSS

CSS Hover Effect
Terrific insight on this article/tutorial about how Veerle went about creating a tabbed menu look with different colors upon hover, including why she chose the specific markup and each CSS rule. Screenshots, markup, CSS shown and explained, along with the sample pages. So check this one out to see how a talented designer thinks through and uses the sliding doors method for a real site project. [Article/tutorial dated 05/07/2007, by Veerle Pieters, Veerle's Blog.]
Navigation Matrix Reloaded
Fabulous tutorial on using the sliding doors method for navigation tabs look. Helpful screenshots, including a very helpful graphic showing the measured matrix that's used to create the CSS positioning rules. [Article/tutorial dated 05/04/2004, by Dan Rubin, Superfluous Banter.]
Overlapping Tabbed Navigation in CSS
“A tutorial showing how overlapping tabbed navigation is possible in CSS and can be cross-browser compatible, accessible and javascript free.” Well done with easy-to-follow instructions, images, all the CSS and markup needed. Source code and all needed available in downloadable .zip file, too. [Article/tutorial dated 12/09/2006, by Shape Shed - Journal.]
Sliding Doors of CSS
Innovative and popular approach to creating navigation with CSS, list items, and layering for this “sliding doors” method. The example is for a tabbed navigation look but can be adapted for whatever visual look you have in mind. See also Sliding Doors of CSS, Part II for improvements. [Article/tutorial dated 10/20/2003, by Doug Bowman, for A List Apart.]
Sliding Doors of CSS, Part II
This second part provides an improved approach to creating navigation with CSS and the popular “sliding doors” method. [Article/tutorial dated 10/30/2003, by Doug Bowman, for A List Apart.]
Smart CSS Multi-element Rollovers
Terrific tutorial with CSS on how to create CSS rollover buttons that “revealed some background colour, contained markup text, and a borderless image. I also had to ensure all three elements could be easily edited.” This approach uses one background image that slides left and right rather than using two separate images for each state. Well done tutorial. [Article/tutorial dated 02/12/2004, by Simon Collison, colly logic.]

top ‘On this page’ menu

CSS Sprites: “Sprites” Method of HTML Lists and CSS

CSS Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icons
By Shirley Kaiser, SKDesigns. Combine all those blog icons or Web site icons into 1 single image and use CSS positioning to display them all where needed. Your pages will load faster since you'll save bandwidth, HTTP requests, and more. Learn how in this CSS sprites tutorial. [Article dated 10/04/2007 by Shirley Kaiser, SKDesigns via WebsiteTips.com's CSS Tutorials.]
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
“Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.” [Article/tutorial dated 09/26/2007, by Andy King, for WebSiteOptimization.com.]
CSS, Image Sprites, Background Images and Website Optimization
Benefits of using the CSS sprites method, along with helpful insight and tips about how to create your sprites image that's optimized with HTTP requests and packet sizes in mind. [Article/tutorial dated 07/26/2007 by Mike Papageorge, fiftyfoureleven.com.]
CSS Sprites: Image Slicing's Kiss of Death How to build a grid-like image that uses CSS positioning to change the visual look upon mouse hover, and all without a flicker problem. This approach also eliminates the need for multiple images and slicing them up. [Article/tutorial dated 03/05/2004, by Dave Shea, for A List Apart.]
Sliding Doors Meets CSS Sprites
Uses a combination of the sliding doors method for tabbed menus and the sprites method of displaying images using positioning and the CSS background-position property. Great method of optimizing your site and speeding up page download times. [Article/tutorial dated 06/24/2004, by Mike Papageorge, fiftyfoureleven.com.]

Want to auto-generate your CSS sprites markup and CSS? See CSS Tools Automated CSS Sprites Generators.

top ‘On this page’ menu

Tabbed Navigation Look with HTML Lists and CSS

See also CSS Sliding Doors: “Sliding Doors” Method of HTML Lists and CSS and CSS Sprites: “Sprites” Method of HTML Lists and CSS above for more tabbed navigation tutorials, examples.

CSS Tabs
Easy-to-follow instructions for creating tabbed navigation without needing images - all CSS and unordered list elements. [Article/tutorial dated 2003-2006, by Patrick Griffiths, HTML Dog.]
Pure CSS Tabs
Mark Pilgrim's tutorial on how to create the look of tabbed navigation using CSS and the list element rather than using graphics. [Tutorial dated 03/24/2003 by Mark Pilgrim, diveintomark.org.]
Resizable Tabbed Navigation with CSS
Great tutorial with plenty of detailed instructions, all the HTML, CSS, and JavaScript for IE to provide a flexible, resizable tabbed navigation using CSS. Uses 3 images and a bit of CSS (and some JavaScript for IE). [Article/tutorial dated 1/2006, by Chris Heilmann, for icant.co.uk.]
Simple Rounded Corner CSS Boxes
An easy approach using lean markup and CSS to create a simple, scalable rounded corner box. Highly recommended. Can be adapted for navigation, too. [Article/tutorial dated 01/25/2006, by Ryan Thrash, for MODx.]