Mobile Friendly Website


Doing it with style

CSS MENUSFloat drop menu system

Date : 1st October 2009

For all modern browsers

Photographers control the camera and lens to "expose" the light recording material (such as film) to the required amount of light to form a "latent image" (on film) or "raw file" (in digital cameras) which, after appropriate processing, is converted to a usable image. Digital cameras use an electronic image sensor based on light-sensitive electronics such as charge-coupled device (CCD) or complementary metal-oxide-semiconductor (CMOS) technology. The resulting digital image is stored electronically, but can be reproduced on paper or film.


The previous slide down single level menu with a twist. This time you have a choice of hovering and clicking the top level text to take you to another page, or clicking the down arrow at the right of each tab to open the sub menu list. The list will stay open until you click another top level link or elsewhere on the page.

The menu can be tabbed to access all the links including the dropdowns.

Tested and working in IE6, IE7, IE8, Firefox and Opera.
Safari and Google Chrome have a problem with their interpretation of the mouse click. If you need this to work in these browsers then you would have to change to a :hover dropdown.

Google Chrome will allow you to tab through the menu.

Safari will need to have the Preferences > Advanced Options > Press Tab to highlight each item on a webpage - 'ticked', and then you can use keyboard tabbing to select items in this menu.

3rd October 2009

Now you can click the down arrow to open the sub menu list and then click the red up arrow to close it again. Who would have thought this possible with just CSS.

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at} and again a support donation is required.
  3. 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.

Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

  1. If you wish to use this demonstration in your website(s) please email me stu{at} seeking permission.
  2. You may NOT place this demonstration on another site for others to download.
  3. You may NOT redistrubute or resell this demonstration.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
  5. Please see the Copyright statement above regarding the requirement for a support donation.


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.


Facebook Twitter rss feed Facebook Fan Page