The dropdown Menu Page

This is the main content. Note that it may get covered up by any absolute elements. Normally you'd have the major content: story, essay, poem, here.

How the menu works

Each main menu item is a div float: left, position: relative. Inside each one is a div position: absolute, with display: none. Thus one just sees the main menu items when the page is opened, or printed.

.item		{border: solid 1px; height: 1.6em;}
.mainmenu	{position: relative; float: left; width: 19%; margin-right: 3px; 
							color:white; background:red; }
.abshide	{position: absolute; display: none; top: 1.6em; left: 0em; width:100%;}
.submenu	{display: block; 			color: red; background: white;}

Since we will be using onMouseOver to control the visibility of the sub-menu (class abshide), It is important that its top <= height of the enclosing relative block (class mainmenu)

Now, the javascript manipulates the display property of each absolute div. Initially, they are display: none, and invisible. show(some_id) is a function that toggles between none and block. so, OnMouseOver causes the submenu (abshide) to become visible, and moving the mouse over this visibile div maintains this visibility, since importantly it is nested within the main menu item.

  <div class="mainmenu" onmouseover="show('language')"
			 onmouseout="show('language')">
	<div class="item">Languages</div>
	<div class="abshide" id="language">
	  <a href="javascript:alert('Hello')" class="submenu item">English</a>
	  <a href="javascript:alert('Bon jour')" class="submenu item">French</a>
	  <a href="javascript:alert('Buenos días')" class="submenu item">Spanish</a>
	  <a href="javascript:alert('Guten Tag')" class="submenu item">German</a>
	</div>
  </div>

Caution about "relative"

It has been discovered that if any element in the area into which the submenus will go is position: relative, bad things will happen. Either the submenus will be covered up, or the offending text will show through. Moral: If you adopt someone's complex styles, it may be tricky to modify them.

Ahhh, but what if Javascript is disabled?

In that case, what I have just told you won't work! You will never see the submenu, because of that display: none; In that case, you don't want or need any of the "abshide" styles. The solution here is to write that line using javascript. When javascript is disabled, it simply won't appear as a style. The submenus will always be visible, and in their normal place within the mainmenu div. (View source to see how it is done in this page.)

Also, we will be left with a lot of different sized menus, whatever comes next should be clear of that. In this page, an extra div, style="clear:both" follows the menus. (One only needs clear:left in the present example.) I put it insice a noscript tag, as it is only needed then.

Media styles - Don't print those annoying extras

When you are viewing this page in a browser, you see 2 columns, each is a "DIV" of classses, respectively, of side and main. We would like side to disappear when printing, also we don't want anything special to happen with main. It could just be considered body in this case.
Secondly, in the browser, we want to maintain the width of main, no matter how much longer than side it may grow, that's why it is a div, rather than just being there as body. We need to give both side and main widths, and float them left and right respectively. Note that the total width is less than 100%, to allow for the padding, border, and some extra space between them.
But, if the width is less than 500px, we don't really want the 2 column effect.

}
@media screen and (min-width :500px) {
    .side	{width: 25%; height: 100%; float: left; 
	padding-right: 1em; border-right: solid 1px; background: #aaf;}
    .main	{width:70%; float: right}
}
@media print {
	.side, .mainmenu	{display: none;}
}