Doing it with style
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.
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.
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...
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.
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.
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.
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 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.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
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.