/*

.: Description:
-----------------------
Function to display the sub menus in the navigation

.: Declarations:
-----------------------
none

/*

.: Usage:
-----------------------

<li onmouseover="javascript:hoverOn(this)" onmouseout="javascript:hoverOff(this)">
	<a>
	...
	</a>
	<ul>
		<li>
		...
		</li>
	</ul>
</li>

**NOTE**:

It's important that the menu markup matches the usage template as the function looks for entry[2] in the DOM array for the children of the list item, which points it at teh <ul> to be hidden, rather than than the preceeding <a> tag.

The function has been designed to be fairly portable, so that you only need to add the function call in the parent <li> of the menu elemen tyou wish to show or hide.
By refering to itself in the call, the function can do the rest by using the document object model (DOM).

Example menu:

<div id="navMain">
			<ul>
				<li><a id="nav1" class="off" href="index.html">Home</a></li>
				<li onmouseover="javascript:hoverOn(this)" onmouseout="javascript:hoverOff(this)"><a id="nav2" class="off"href="#">Data Capture</a>
					<ul>
						<li><a href="#">Sub #1<br />Line 2</a></li>
						<li><a href="#">Sub #2</a></li>
						<li onmouseover="javascript:hoverOn(this)" onmouseout="javascript:hoverOff(this)"><a class="flyOut" href="#">Sub #3</a>
							<ul>
								<li><a href="#">Flyout #1</a>
								<li><a href="report.html">Flyout #2</a>
							</ul>
						</li>
						<li onmouseover="javascript:hoverOn(this)" onmouseout="javascript:hoverOff(this)"><a class="flyOut" href="#">Sub #4</a>
							<ul>
								<li><a href="#">Flyout #1</a>
								<li><a href="report.html">Flyout #2</a>
								<li><a href="report.html">Flyout #3</a>
							</ul>
						</li>
					</ul>
				</li>
				<li><a id="nav3" class="off" href="#">Reports</a></li>
				<li><a id="nav4" class="off" href="#">Video Conferences</a></li>
				<li><a id="nav5" class="off" href="#">Utilities</a></li>
			</ul>
</div>




.: The Script:
-----------------------

*/

function hoverOn(el){
        subMenus = el.getElementsByTagName("ul");
        if(subMenus.length > 0){
			firstSub = subMenus[0];
			firstSub.style.visibility = 'visible';
			
		}

	
	
	//el.childNodes[2].style.visibility = 'visible';
}

function hoverOff(el){
	subMenus = el.getElementsByTagName("ul");
        if(subMenus.length > 0){
			firstSub = subMenus[0];
			firstSub.style.visibility = 'hidden';
			
		}

	//el.childNodes[2].style.visibility = 'hidden';
}