Dropline 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 dropline menus.

For this demonstration I have limited the dropline to one level but this can easily be expanded to cater for multiple levels, dropdowns from the droplines and flyouts from the dropdowns. If you have a requirement for any of these expansions then please contat me for an estimate of cost.

The default style that you see when entering this page for the first time is a basic dropline with a current page selection visible. Hovering over any other top level tab will hide this current dropline and where there is another dropline this will replace the current one. Moving the mouse off the menu will redisplay the current dropline. There is also the option to have a left or right aligned dropline.

All done with just CSS, no javascript.

Choose your CSS Menu

• Default
  Breadcrumb trail, simple dropline
• Centered
  Centered version with breadcrumb trail.
• Centered v2
  An alternative centering method.
• Line up
  A pull up line with png icons

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: