Source for ex9.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--chtml include "//webinfo/incs/header.inc"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Positioning Example</title>
<link href="/webinfo/webinfo.css" type="text/css" rel="stylesheet" />
<link href="csspos.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
//<![CDATA[
function mIn () { return true; }
function mOut () { return true; }
function makeLayer () { return true; }
function flyDefs () { return true; }
if (! document.flyout_disable &&
'undefined' != typeof document.getElementById)
document.write ('<' + 'script src="/home/scripts/flyout.js" ' +
'type="text/javascript"><' + "/script>\n");
// ]]>
</script>
<script type="text/javascript" src="csspos.js"></script>
</head>
<body>
<h1>CSS Positioning Example</h1>
<!--chtml set addcrumb-->
<a href="submenus.html">CSS Positioning</a>
<!--chtml /set-->
<!--chtml include "//webinfo/incs/navbar.inc"-->
<p>This example shows how to use CSS to position flyout menus.</p>
<div class="dspl">
<ul id="nomenus">
<li id="gr"><a href="#" onmouseover="mIn ('gr')"
onmouseout="mOut ('gr')">Groceries </a>
<div><ul class="flyout" id="l_gr">
<li id="gr_pr"><a href="#" onmouseover="mIn ('gr_pr')"
onmouseout="mOut ('gr_pr')">Produce </a>
<div><ul class="flyout" id="l_gr_pr">
<li><a href="#">Apples </a></li>
<li><a href="#">Lettuce </a></li>
</ul></div>
</li>
<li id="gr_me"><a href="#" onmouseover="mIn ('gr_me')"
onmouseout="mOut ('gr_me')">Meat </a>
<div><ul class="flyout" id="l_gr_me">
<li><a href="#">Chicken </a></li>
<li><a href="#">Pork Chops </a></li>
</ul></div>
</li>
</ul></div>
</li>
<li id="of"><a href="#" onmouseover="mIn ('of')"
onmouseout="mOut ('of')">Office Supplies </a>
<div><ul class="flyout" id="l_of">
<li id="of_pa"><a href="#" onmouseover="mIn ('of_pa')"
onmouseout="mOut ('of_pa')">Paper Products </a>
<div><ul class="flyout" id="l_of_pa">
<li><a href="#">Envelopes </a></li>
<li><a href="#">Stationery </a></li>
</ul></div>
</li>
<li id="of_fa"><a href="#" onmouseover="mIn ('of_fa')"
onmouseout="mOut ('of_fa')">Fasteners </a>
<div><ul class="flyout" id="l_of_fa">
<li><a href="#">Paper Clips </a></li>
<li><a href="#">Staples </a></li>
</ul></div>
</li>
</ul></div>
</li>
</ul>
</div>
<p>You can view the relevant source code:</p>
<ul>
<li><a href="ex9_html-src.html">HTML Source</a></li>
<li><a href="csspos_css-src.html">CSS</a></li>
<li><a href="csspos_js-src.html">Javascript</a></li>
</ul>
<!--chtml include "//webinfo/incs/footer.inc"-->
</body>
</html>