Wickham's HTML & CSS tutorial

Sitemap | Home | Search

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.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon 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:-

Horizontal dropdown menu

1 green icon 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 green icon 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:-

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:-

"#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:-

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:-

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 green icon 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 green icon 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.

The code is based on the example When Is a Float Not a Float?

The styles (in the head section of this page) are:-

The html markup is:-

Flexible width floated menu

5 green icon This menu will expand to 100% of any window width (the body of this page has 20px side margins).


The styles (in the head section of this page) are:-

The html markup is:-

All the widths are in % adding to 99%. (Firefox is OK with 100% but IE7 dropped the last link when the total was 100% so I reduced the padding-left of #menu li.first to 3% totalling 99%). It will work until the window width is so narrow that the link texts won't fit, then a link will drop to a lower line (you could add min-width to solve this). Each li tag has padding to the right only of 4% and the first li tag has a class for left padding 3% so that all spaces between li tags and at the sides are similar.

How do I stop my drop down menu being hidden behind Javascript or Flash items?

6 green icon You need to use a z-index and a position (usually position: relative but it could be position: absolute). Apply the lower z-index to the javascript parent div and the higher z-index to the drop down menu parent div. The position enables the z-index to operate (it sometimes does without the position, but don't assume that it always will).

The CSS code might be like this:-

For Flash videos you need to add code into the object and embed tags to make the flash transparent. The position: relative; z-index: -1; code above isn't necessary.

The HTML markup code might be like this:-


View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

Some styles have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer. However, the most important styles for the dropdown menus are in the stylesheet. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2013

top | Sitemap | prev | next


web www.wickham43.net/