Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Here

Ultimate CSS Drop Down Menu

Demo:

Author: Dynamic Drive

This CSS Drop Down menu is a culmination of trying to create a *pure* CSS based menu that's actually usable in the real world and with similar refinements next to its JavaScript based counterparts. To that end, we call this the Ultimate CSS Drop Down Menu, more as a reflection of its aspirations than actual state. At the moment the menu supports the following:

  • Unlimited levels of sub menus
  • When the browser width is sufficiently small, top menu items close to the right edge have their sub menus drop down to the left instead of right (using CSS Media Queries).
  • On mobile and small browser windows, sub menus expand to the width of the viewport (using CSS Media Queries).
  • The currently active parent menu item(s) are highlighted with a background color.
  • Menu items with sub menus display a down or right arrow without images (using CSS pseudo class).
  • CSS3 powered, smooth transitions between drop downs.
  • Works in IE 8+ and mobile devices reasonably well.

Help Ultimate CSS Drop Down Menu live up to its name. Please share your comments below on what works, what doesn't, and how it could be improved.

The CSS:

The code above references ultimatedropdown.css (right click, and select "Save As").

The HTML:

IMPORTANT:Notice in the HTML markup how the menu header links (those that lead to a drop down) use "javascript:vold(0)" as their "href" value. This is primarily to prevent touch screen devices from navigating to another page when the user taps on the header, instead of revealing a drop down menu.

Code Info

Rate this code:

Date Posted: 08/10/2016

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive