Dropdown with Flyout CSS Menus

This page will be expanded over the coming year to show how the same simple nested unordered list can be styled in different ways to produce professional quality dropdown / pullup menus.

For this demonstration I have limited the dropdown to one level of flyout but this can easily be expanded to cater for multiple level flyouts.

The default style that you see when entering this page for the first time is a basic dropdown with a breadcrumb trail which is indicated using a brown background color. This can easily be restyled to any color you wish.

Choose your CSS Menu

• Default
  Breadcrumb trail, simple dropdown
• Pull up 1
  Breadcrumb trail, simple pull up
• Centered
  Latest browser versions and IE method
• Animated
  Centering for most browsers with animation.

Downloads

Click the links below to download zip files of each menu. Note that these menus are styled for use with standards compliant doctypes and that you will need to ensure the stylesheet paths are correct for any image used.

For personal use a support donation is requested though not compulsory and the copyright comment must be retained in the stylesheet.

For commercial use or on paying jobs a support donation is required and the copyright comment must be kept in the stylesheet. To make a support donation please click the button below: