Listing 1. You can use DHTML to add a pull-down menu to your Web site. Click here to see this code in action.

 

<html>
<head>
	<title>Pull Down Menus</title>
	<script type="text/javascript" language=javascript>
		<!-- Hide from older browsers

		function toggleMenu(currElem,nextPos) {
			menuObj = (document.all) ? eval("document.all." + currElem + ".style") : eval("document." + currElem)
			if (toggleMenu.arguments.length == 1)
				nextPos = (parseInt(menuObj.top) == -5) ? -90 : -5
			if (document.all)
				menuObj.pixelTop = nextPos
			else
				menuObj.top = nextPos
		}

		// End hiding -->
	</script>
	<style type="text/css">
		<!--
		
		.menu {position:absolute; font:12px helvetica; background-color:#CCCCCC; layer-background-color:#CCCCCC}
		#fileMenu {left:10px; width:70px; top:-90px}
		#searchMenu {left:85px; width:100px; top:-90px}
		A {text-decoration:none; color:#000000}
		A:hover {background-color:#000099; color:#FFFFFF}
		
		-->
	</style>	
</head>
<body bgcolor=white>
<div id="fileMenu" class=menu onMouseover="toggleMenu('fileMenu',-5)" onMouseout="toggleMenu('fileMenu',-90)"><br>
	<a href="javascript:window.open()">Open</a><br>
	<a href="javascript:window.print()">Print</a><br>
	<a href="javascript:history.back()">Back</a><br>
	<a href="javascript:history.forward()">Forward</a><br>
	<a href="javascript:window.close()">Close</a><hr>
	<a href="javascript:toggleMenu('fileMenu')">File</a>
</div>
<div id="searchMenu" class=menu onMouseover="toggleMenu('searchMenu',-5)" onMouseout="toggleMenu('searchMenu',-90)"><br>
	<a href="http://www.ask.com">Ask Jeeves</a><br>
	<a href="http://www.google.com">Google</a><br>
	<a href="http://www.alltheWeb.com">All The Web</a><br>
	<a href="http://www.av.com">AltaVista</a><br>
	<a href="http://www.dmoz.com">Open Directory</a><hr>
	<a href="javascript:toggleMenu('searchMenu')">Search</a>
</div>
</body>
</html>