I have put the relevant sections of the script below.
The 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;
The navigation:
<ul id="nav">
<li><a href="index.php">Home</a><li>
<li><a href="marketing.html" onmouseover="mopen('m1')"
onmouseout="mclosetime()">Marketing</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="price.html">Marketing - Price</a>
<a href="product.html">Marketing - Product</a>
<a href="promo.html">Marketing - Promotion</a></li>
</div>
<li><a href="resources.html" onmouseover="mopen('m2')"
onmouseout="mclosetime()">Human Resources</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="leader.html">HR - Leadership</a>
<a href="motivate.html">HR - Motivation</a>
<a href="OS.html">HR - Organisational Structure</a></li>
</div>
<li><a href="AandF.html" onmouseover="mopen('m3')"
onmouseout="mclosetime()">Accounting and Finance</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="cash.html">A and F - Cashflow</a>
<a href="costs.html">A and F - Costs</a>
<a href="invest.html">A and F - Investment</a>
<a href="contribute.html">A and F - Contribution</a></li>
</div>
<li><a href="OPmanagement.html" onmouseover="mopen('m4')"
onmouseout="mclosetime()">Operations Management</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="quality.html">OM - Quality</a>
<a href="waste.html">OM - Waste Managment</a></li>
</div>
<li><a href="Misc.html" onmouseover="mopen('m5')"
onmouseout="mclosetime()">Misc</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="obj.html">Misc - Objectives</a>
<a href="research.html">Misc - Research</a>
<a href="finance.html">Misc - Sources Of Finance</a></li>
</div>
<li><a href="MailingList/su.html">Mailing List</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
The CSS
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1.25;
}
#nav a {
display: block;
width: 10em;
}
#nav { clear: both; padding: 13px 0 0; }
#nav li { display: inline; list-style-type: none; font-size: 1.2em; }
#nav li a { float: left; padding: 0 22px 0 0; margin: 0 22px 0 0; color: #ddd; border-right: 1px solid #505052; }
#nav li.last a { border: 0; padding: 0; }
#nav li a:hover { color: #fff; }
#nav li a.current { font-weight: bold; color: #fff; }
If you could possibly help that would be greatly appreciated. You can see a live demo hereThanks for any help you can possibly give.
