<html>
<head>
<title> Drop down Menu One
</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
<script language="javascript">
<!--
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// Stop hiding -->
</script>
</head>
<body>
<table align="center" cellpadding="10">
<tr>
<td align="center">
<ul id="ddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Animals</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="chickens.html">Frozen Chickens</a>
<a href="horses.html">Eventing Horses</a>
<a href="pigs.html">Pot Bellied Pigs</a>
<a href="cows.html">Cows</a>
<a href="elephants.html">Huge Elephants</a> </div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Food</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="hamburger.html">Hamburgers</a>
<a href="barbecue.html">Barbecue</a>
<a href="veggies.html">Veggies</a>
<a href="yogurt.html">Frozen Yogurt</a> </div>
</li>
<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Chocolate</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="dark.html">Dark Chocolate</a>
<a href="milk.html">Milk Chocolate</a>
<a href="semisweet.html">Semi-sweet Chocolate</a>
<a href="white.html">White Chocolate</a> </div>
</li>
<li><a href="order.html">Order</a></li>
<li><a href="help.html">Help Me!</a></li>
<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">Cartoons</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="better.html">For Better or Worse</a>
<a href="luann.html">LuAnn</a>
<a href="peanuts.html">Peanuts</a>
<a href="mutts.html">Mutts</a> </div>
</li>
<li><a href="#"
onmouseover="mopen('m5')"
onmouseout="mclosetime()">Flavors</a>
<div id="m5" style="width: 80px"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="dark.html">Dark </a>
<a href="milk.html">Milk</a>
<a href="semisweet.html">sweet</a>
<a href="white.html">White</a> </div>
</li>
<li><a href="#"
onmouseover="mopen('m6')"
onmouseout="mclosetime()">Get Code!</a>
<div id="m6" style="width: 80px"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="ViewDropMenuCode.html">View Source </a>
<a href="ViewCSS.html">View CSS</a>
</div>
</li>
</ul>
<div style="clear:both"></div>
</td>
</tr>
</table>
</body>
</html> |