Wickham's HTML & CSS tutorial
Dropdown menus
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems 
warning: works in some situations or some browsers or needs care to display as you wish 
OK in Firefox, Safari, Opera, Google Chrome and IE
Dropdown menu templates
See some examples of navigation bars and drop down menus at cssplay and dynamicdrive.com
The cssplay menus are pure CSS and don't require ActiveX or javascript and generally use inline conditional comments for IE6 with a small table. It does cause more code and may be considered a bit messy to have so many conditional comments in the body markup but they do work well.
Another type of code in two examples below uses a behavior file csshover3.htc instead of inline conditional comments so the code is less complicated but it does require ActiveX in IE6. However, you will probably find it easier to use code from an online source and edit it because coding your own menu from the start can be tricky.
Dropdown menus generally
The drop down levels cannot usually be accessed by people who cannot use a mouse or who choose not to use one, because the hover doesn't work without a mouse. However, tabbed browsing can access drop down levels, so check your menu code to ensure that tabbed browsing works.
If you make site navigation dependant on javascript or ActiveX which some viewers may have disabled (perhaps without any choice to enable it) you should provide an alternative navigation method. This is usually done either by having a conventional hyperlink to a sitemap which also has conventional hyperlinks to various pages on the site. The sitemap link can be tucked away unobtrusively at the bottom of the page together with contact details, privacy policy, legal matters and so on.
Alternatively make sure that the top level menu items work as a suitable link so that people without ActiveX in IE6 or those who cannot use a mouse can get to a page that has the other links on it. Then the dropdown links are just a quicker way to provide links for those with a mouse without going through another page.
Note that drop down menus and flyout menus won't show the drop down or flyout levels when using a touch screen as you can't hold the hover and click a nearby link at the same time with a finger unless you use the HTML5 ARIA codes described here:- HTML5 aria-haspopup with a tutorial here:- HTML5 ARIA.
Dropdown menus using csshover3.htc behavior file
The two examples below need IE ActiveX enabled to work in IE6, even though they have no javascript which is what ActiveX is normally used for. Modern browsers will display the dropdown menus without javascript/ActiveX enabled.
Note that the examples below work well in IE6 and above, Firefox, Opera, Safari and Google Chrome. However, when coding your own menu you may find in several versions of IE that the mouse tends to lose its connection when moving from the top level to the dropdown level so it may cause you a lot less stress if you download a dropdown menu package that has been tested, and edit it.
The mouse can lose contact when you have highlighted the top level of a drop down menu and then move to the drop down items, especially in IE, causing the dropdown items to disappear and so the menu is unusable. This is caused by a small space between the top level and the dropdown level which can be caused by margin, padding, border or line-height. It helps to start coding a dropdown menu with no margins, padding or borders and make sure it works in IE before adding properties in some places. Line-height can also be a cause so you may also have to start with line-height: 1.0 or the same height as the li and "a" styles and gradually increase it until it looks good without breaking the menu. Alternatively, adding a padding-bottom to the top level li tag, remembering to add padding-bottom: 0; to the drop down level li tags if you don't want it there, can sometimes solve the problem of the mouse losing contact, like this:-
- #menuh li { position: relative; padding-bottom: 10px; } /*edit the 10px to whatever suits your coding*/
- #menuh li li { position: relative; padding-bottom: 0; }
Horizontal dropdown menu
1 The Home menu has two levels of drop down menus; the Links tab has one level below and the Advice tab has just a link.
See the css code under the heading /*DROPDOWN MENUS - HORIZONTAL*/ here.
Vertical dropdown or flyout menu
2 This example has the same basic code without float: left in menuv and menuv ul; menuv ul ul has changed compared with menuh ul ul.
In addition, images have been added to menuv ul li levels which appear on hover. These would normally move down in line with the menu button positions but by inserting different top positions for the second and further images in the html file these can be made to display in the same position as the first, as shown here. There are additional styles in the stylesheet.
See the css code under the heading /*DROPDOWN MENUS - VERTICAL*/ here.
The csshover3.htc menus generally
The above dropdown menu examples need a file called csshover3.htc which can be downloaded from whatever:hover at the bottom of its page, version 3.11. This is because IE6 and earlier IE versions behave differently to Firefox and later IE versions and this file corrects the behavior.
The file is put in conditional comment code in the page head like this:-
- <!--[if lt ie 7]>
- <style type="text/css" media="screen">
- body{behavior:url(csshover3.htc);}
- #menuh{float:none;}
- #menuv{float:none;}
- #menuh ul li{float:left; width: 100%;}
- #menuv ul li{float:left; width: 100%;}
- #menuh a{height:1%;}
- #menuv a{height:1%;}
- </style>
- <![endif]-->
The code lt ie 7 means all IE versions less than IE7. The menu styles are the ones varying from those in the css file.
The menu code begins with:-
<div id="menuh-container"><div id="menuh">
and ends with:-
</div><!-- end the menuh-container div --></div><!-- end the menuh div -->
.
The code for the first horizontal menu tab called Home is:-
- <!--HOME-->
- <ul><!--first level ul number 1-->
- <li><a href="#thumb">Home</a>
- <ul><!--second level of first ul number 1-->
- <li><a href="#thumb">General</a>
- <ul><!--third level of first level ul part 1-->
- <li><a href="introduction.html">Introduction</a></li>
- <li><a href="links.html">Links</a></li>
- <li><a href="generaladvice.html">Advice</a></li>
- </ul><!--end of third level of first ul part 1-->
- </li><!--end of li for General-->
- <li><a href="#thumb">Examples</a>
- <ul><!--third level of first ul part 2-->
- <li><a href="basicwebpage.html">Basic Page</a></li>
- <li><a href="divboxes.html">Div boxes</a></li>
- <li><a href="threecolumns.html">Div layouts</a></li>
- </ul><!--end of third level of first level ul part 2-->
- </li><!--end of li for Examples-->
- </ul><!--end of second level of first ul number 1-->
- </li><!--end of li for Home-->
- </ul><!--end of first level ul number 1-->
"#thumb" or "#nogo" in some of the links prevents a blank page loading for a link. I've used it here because I want to show the codes with links but I haven't got any reason to fill the links.
The above code is just for the Home button; code is similar for the others but less in my example because only the Home button has three levels (top and two drop down levels).
The menu code uses lots of ul and even more li tags for each level of dropdown so be very careful to ensure that all tags are in the correct place and all tags opened are closed. There should be a pattern to them which is repeated for each menu item.
You also need to look at all the complicated styles in the stylesheet. See the /*DROPDOWN MENUS*/ sections here.
The css file has lots of levels of style code, for instance:-
- #menuh ul {}
- #menuh ul ul {}
- #menuh ul ul ul {}
- div#menuh li:hover ul ul {}
- div#menuh li li:hover ul ul {}
- div#menuh li li li:hover ul ul {}
- div#menuh li li li li:hover ul ul {}
and so on, which relate to each level.
Positioning of popups shown in vertical dropdown menu
The style in the stylesheet for the small image popup in the second example has a standard offset for width and height which results in each popup offset by the same amount that the button is offset from its neighbour. If you want all the popups to show in the same place an individual adjustment has to be made to each popup image in the html file. The first popup needs no adjustment; it takes the standard stylesheet position. The second and subsequent images will have a top value adjustment.
Each popup will require a different value achieved by trial and error though you should be able to get close with the first attempt by estimating the height of the menu button (and padding if any from its neighbour). Deduct this value from the standard offset in the stylesheet for the second popup and increase the adjustment by the same amount for each further image (assuming all buttons are the same size).
In the example above the stylesheet has #menuv ul li img { position:absolute; top: 25px; left: 320px; } so that each popup is lower than its menu button by 25px.
The second button is already 21px lower than the first, so the adjustment needed for the second popup to be in the same place is 25-21= 4px. The third button is 42px lower than the first so the adjustment for its popup is 25-42= -17px.
The code for the adjustment of the second popup is:-
- <ul>
- <li><a href="#thumb">Links</a><img src="images/beetle50x50.jpg" alt="beetle" style="top: 4px;"/>
Note the addition of style="top: 4px;" in the src for the popup. The third popup has an adjustment of -17px.
Sliding dropdown menu
3 See wickham43.com Homepage which uses a sliding dropdown menu using code from cssplay "A sliding definition list 28-12-2006".
Centered widthless floated menu
4 The silver background div #header has no width (ie 100% and flexible) but the menu will center in any width. If a containing div has a width then it's easy to give an inner div a width and margin: auto and it will center, but if the containing div has a flexible width the margin: auto code won't work.
In the example below the menu has li tags with no width so they can take links of varying widths and the menu can expand if text size is increased. The basis of the code is that the #nav div has left: 50% which puts the left edge at the page center (but this div has no border and no background-color so it is invisible) and the ul div inside has left: -50% to drag it back left by the same amount which results in it being centered.