skip to content

CSS only drop-down menu - further examples

24th May 2006

Menu #1 - 24th May 2006

This first example is a flexible width top level list that expands to fit the text.
It has a fixed height and uses a background image that stretches the full width of the outer div, in this case 750px, and a background div in each top level link to mark the right hand edge of the link.

The top level hover varies the text color and the bottom border color.
The sub level hover varies the background color and adds a background square bullet against the top line of each list item. Sub level drop down lists can be positioned anywhere (left/right) beneath the top level list.

The sub levels are a fixed size, but can easily be changed to suit your requirements, and have a single pixel border.
Sub level flyouts are indicated by a sub level link with a grey background and a square bullet. These flyouts can be made to appear to the right or the left of the sub level list.

Menu #2 - 30th May 2006

A simple looking menu this time, but looks can be deceiving.
This one is for those people who have no room for a drop down/ flyout menu. Give it a try, but be prepared for a surprise.

The hover state varies the background and foreground shades of grey.

As you have found out, if a drop down menu has no flyout and is longer than 6 items a scroll bar is added.

If a flyout is longer than 6 items then a scroll bar is added.

The drop down and flyout menus can also have non-selectable text headings.

So what we have is a drop-down/flyout menu crammed into a small space.

Menu #3 - 4th June 2006

This one is for those who have no room for a menu. The top level takes up just enough room for the MENU tab.

Works in IE5.5, IE6, IE7, Firefox, Opera etc. although Opera 8.54 has a problem with the ads below.

The top level is a fixed width and height, but this can be altered to suit your requirements.

The sub level drop down is a fixed width and variable height with a pointer to indicate the flyouts.

The flyouts are a fixed width and variable height and again these can be altered to suit.

So another simple drop/down and flyout menu that takes up little space.

And on to the next one...

Menu #4 - 6th June 2006

As this page gets longer, the embedded css files for each menu will get longer and become more difficult to follow. So with this menu I have decided to use a separate css file which can be found here MENU #4 CSS FILE

The associated image files are in the same directory.

This menu has been tested in IE5.5, IE6, Firefox 1.5.0.4, Opera 8.5 and should work in IE7 and Safari.

This one is more graphical than any of the previous ones, which in some ways makes it simpler to understand.

If you look at the css file you will see that the CSS for IE5.5 and IE6 has been combined with the CSS for IE7 and non-IE browsers which greatly reduces the file size.

The menu is centered on the page in all browsers and has icons against each of the top level and sub level items.

The menu is fixed width and height and because of this will break if the text is resized.

So a simple menu with a change of text color and underlines on :hover, but visually interesting because of the icons, which incidentally are from the silk collection from FAMFAMFAM.

Menu #5 - 7th June 2006

Back to the absolute minimum needed to make a dropdown flyout menu. The css can be found here MENU #5 CSS FILE

There are no images involved in the making of this menu.

This menu has been tested in IE5.5, IE6, Firefox 1.5.0.4, Opera 8.5 and should work in IE7 and Safari.

Although this is the simplest that I can produce it has one feature that none of the above have. It will stay in shape when the text size is increased (or decreased) until the top level list breaks over two lines, even then if the last menu did not have the reverse flyout it would still function.

In order for the menu to stay in shape it uses em sizes throughout.

So the simplest menu to date with underlines on :hover.

This is a good starting point for your own menu design. Just add extra styling as you want, but take it one step at a time and thoroughly test each step in as many browsers as possible.


Information

Just to show what is possible with the drop-down series of demonstrations I will be using this page to show some of my attempts at producing web ready menus using this technique.

These menus should work in IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 etc. though not Mac IE5.x.

I will be adding to this page over the coming weeks/months whenever I get the time to experiment.

Cascading Style Sheet

With these menus I have had a rethink on the CSS. Previously I had used one CSS files for IE6 and earlier and another CSS file for IE7 and all other browsers.

But looking at the CSS again I have realised that they are mutually exclusive and can quite happily be combined into just one style sheet. If you look at the head of this document you will see the style sheet embeded

The xhtml

The (x)html code for these menus can be seen in the source code in the 'info' div.

You will see that conditional comments have been used to hold the IE5.5 and IE6 specific version of the menu which used nested tables with nested links. The other browsers will not see the nested links and instead will use the normal nested unordered lists.

Please note that you will also need a standards compliant !doctype for this menu to work correctly.

Problems with Flash

If you are having problems with your menu dropping down over a flash object then an answer can be found here FAQ: Navigation (flyout) menus are covered up by other things on the page



Copyright

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 add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated.

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}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund 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.


Recommended Sites

CSSplay web design/assistance

"The citroen.co.uk web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth


Advertise with CSSplay

CSS play pages

CSS (Design) - TOP.ORG

CSS play recommend

Free, practical CSS menus, layouts, and examplesSitegrinderPSD to HTMLEarn from your site today with Netklix text ads