<html>
<head>
<title>Pull Down Menus</title>
<script type="text/javascript" language="Javascript">
<!-- Hide from older browsers
if (document.getElementById) {
stdBrowser = true
}
else {
stdBrowser = false
}
function toggleMenu(currElem,nextPos) {
if (stdBrowser) {
menuObj = document.getElementById(currElem).style
}
else {
menuObj = eval("document." + currElem)
}
if (toggleMenu.arguments.length == 1) {
if (parseInt(menuObj.top) == -5) {
nextPos = -90
}
else {
nextPos = -5
}
}
if (stdBrowser) {
menuObj.top = nextPos + "px"
}
else {
menuObj.top = nextPos
}
}
// End hiding -->
</script>
<style type="text/css">
<!--
.menu {position:absolute; font:12px arial, helvetica, sans-serif; background-color:#CCCCCC;
layer-background-color:#CCCCCC; top:-90px}
#fileMenu {left:10px; width:70px}
#searchMenu {left:85px; width:100px}
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.google.com">Google</a><br />
<a href="http://www.ask.com">Ask Jeeves</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>
<script>
function toggleMenu(currElem, showElem) {
menuObj = document.getElementById(currElem).style
menuObj.display = showElem
}
</script>
<style type="text/css">
.menu {
position: absolute;
font: 12px arial, helvetica, sans-serif;
background-color: #ffffcc;
border: 2 solid #000099;
line-height: 2.25;
padding: 10px;
display: none;
}
#fileMenu1 {left: 10px; top: 50px; display: none; width: 150px}
#fileMenu2 {left: 210px; top: 50px; display: none; width: 150px}
#topMenu1 {left: 10px; top: 5px; display: block; width: 150px}
#topMenu2 {left: 210px; top: 5px; display: block; width: 150px}
a {text-decoration: none; color: #336699}
a:hover { background-color: #336699; color: #ffffff}
</style>
<body>
<div class="menu" id="topmenu1" onMouseOver="toggleMenu('filemenu1','block')" onMouseOut="toggleMenu('filemenu1','none')">
<a href=#>FILE MENU 1</a>
</div>
<div class="menu" id="filemenu1" onMouseOver="toggleMenu('filemenu1','block')" onMouseOut="toggleMenu('filemenu1','none')">
<a href=#>Menu One</a><br>
<a href=#>Menu One</a><br>
<a href=#>Menu One</a><br>
<a href=#>Menu One</a>
</div>
<div class="menu" id="topmenu2" onMouseOver="toggleMenu('filemenu2','block')" onMouseOut="toggleMenu('filemenu2','none')">
<a href=#>FILE MENU 2</a>
</div>
<div class="menu" id="filemenu2" onMouseOver="toggleMenu('filemenu2','block')" onMouseOut="toggleMenu('filemenu2','none')">
<a href=#>Menu One</a><br>
<a href=#>Menu One</a><br>
<a href=#>Menu One</a><br>
<a href=#>Menu One</a>
</div>
<br><br>
<h1> where does this appear?</h1>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shakespeare's Plays</title>
<script type="text/javascript" language="Javascript">
<!-- Hide script from older browsers
function toggleMenu(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style
if (thisMenu.display == "block") {
thisMenu.display = "none"
}
else {
thisMenu.display = "block"
}
return false
}
else {
return true
}
}
// End hiding script -->
</script>
<style type="text/css">
<!--
.menu {display:none; margin-left:20px}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<h1>Shakespeare's Plays</h1>
<h3>
<a href="page1.html" onclick="return toggleMenu('menu1')">Comedies</a>
</h3>
<span class="menu" id="menu1">
All's Well That Ends Well<br />
As You Like It<br />
Love's Labour's Lost<br />
The Comedy of Errors
</span>
<h3>
<a href="page2.html" onclick="return toggleMenu('menu2')">Tragedies</a>
</h3>
<span class="menu" id="menu2">
Anthony & Cleopatra<br />
Hamlet<br />
Romeo & Juliet
</span>
<h3>
<a href="page3.html" onclick="return toggleMenu('menu3')">Histories</a>
</h3>
<span class="menu" id="menu3">
Henry IV, Part 1<br />
Henry IV, Part 2
</span>
</body>
</html>
623.845.3000 
