Problem with drop-down menu

[friendOfTheFox]

Hello,
I am new to JS, and I’m trying to workout some skill.
I decided to create a page with a menu that displays when you hover over it.

The element that triggers the onmouseover is the LINK at the top of the menu and also the DIV containing the LINK.
The menu itself is a UL.

The problem is that as soon as the page loads, all the ULs are styled as block.

I managed to narrow the problem, and it is the displayObj function.
The CSS is not an issue here.

Please advise

<div id="menu">
	<div>
		<a href="menu1.html">Home</a>
		<ul>
			<li>News</li>
			<li>Gallery</li>
			<li>Blog</li>
		</ul>
	</div>
	<div>
		<a href="menu2.html">Research</a>
		<ul>
			<li>Soul Shoes</li>
			<li>Helvetivca History</li>
			<li>Chicken Flags</li>
		</ul>
	</div>
</div>

window.onload = initAll;

function initAll(){
	menuDiv = document.getElementById("menu");
	menuATags = menuDiv.getElementsByTagName("a");
	var adjasentUl = new Array();
	
	for ( var i=0; i < menuATags.length; i++){
		if(menuATags[i].parentNode.tagName == "DIV"){
			
			adjasentUl[i] = menuATags[i].nextSibling.nextSibling;
			
			if(adjasentUl[i].tagName == "UL"){
				
				menuATags[i].onclick = retFalse;
				
				menuATags[i].onmouseover = displayObj(adjasentUl[i]);
				menuATags[i].onmouseout = hideObj(adjasentUl[i])
				
				menuATags[i].parentNode.onmouseover = displayObj(adjasentUl[i]);
				menuATags[i].parentNode.onmouseout = hideObj(adjasentUl[i]);
				
				adjasentUl[i].onmouseover = displayObj(adjasentUl[i]);
				adjasentUl[i].onmouseout = hideObj(adjasentUl[i]);
			}
		}
	}
	
	function displayObj(toShow){
		toShow.style.display = "block";
	}
	
	function hideObj(toHide){
		toHide.style.display = "hidden";
	}
	
	function retFalse(){
		return false;
	}
}

[Stomme_poes]

Lawlz bad editing… re JS: 10% of respondents said they had NO javascript : )

[Stomme_poes]

A screen reader sits atop whatever browser the user has on his/her system. If it’s an older reader (and that’s likely cause the commercial ones are damn expensive… see JAWS costing about a thousand euros for example), they may also be stuck with an older browser. (Yes there are free readers… a lot of people use JAWS and W-E anyway though) But, either way, if the browser has JS enabled then the user gets a JS’d page. However, JS that updates the DOM without page refreshes may not get seen by the screen reader: the Big Two for Windows (JAWS and Window-Eyes) and some other readers create a virtual buffer on page load. This is what the user actually interacts with (the screen reader adds extra navigation functionality, so users can use many different ways to get around the page using keyboard shortcuts), and in the newest copies of JAWS and Window-Eyes, this buffer is refreshing with AJAX’d and JS’s pages, but older copies don’t or do it poorly.

Display: none and visibility: hidden is treated like so by the Big Two and I believe also NVDA and HAL, not sure (those are all Windows readers… I have much trouble using Orca/Linux so I can’t say how it treats that CSS… it does not use a virtual buffer either), meaning if you set something to display: none, it is not read out.

Since you are removing this display: none when the user hovers a mouse, anyone not using mice never sees the content at all. Search engines do ignore all (or almost all) CSS so they will get to the content okay. Most screen reader users have CSS on though (like most browsers) and a recent survey asking how many had Javascript enabled, 10% said yes, 74% said yes, and the rest didn’t know what Javascript was (like many computer users) meaning they prolly have it on as it’s also on by default in most graphical browsers.

http://juicystudio.com/article/screen-readers-display-none.php There are also (old) W3C/WCAG pages mentioning this, but yes newer versions of the Big Two still react to display: none.

So, for this reason, the standard setup for dropdown menus (at least for evangelistas) is what you find at HTMLdog’s Sons of Suckerfish menus. These make the submenus absolutely positioned and just pull them offscreen. This is screen reader safe (so far as we’ve tested anyways). Damn things ate finicky. : )

Example of a menu using CSS but with a bit of JS added over it for a slight delay.

Do you have firebug or some other browser-based debugging software? You can see if the display: block is definitely getting added to your submenus.

[Stomme_poes]

I’m going to annoyingly scoot around your actual question and state that it’s easier to use a traditional menu setup (HTML and CSS, with Javascript easlily either imitating the CSS or adding stuff like fades or timers to it).

<ul id="menu">
  <li><a href="menu1.html">Home</a>
    <ul>
      <li>News</li>
      <li>Gallery</li>
      <li>Blog</li>
    </ul>
  </li>
  <li><a href="menu2.html">Research</a>
    <ul>
      <li>Soul Shoes</li>
      <li>Helvetivca History</li>
      <li>Chicken Flags</li>  
    </ul>
  </li>
</ul>

Traditionally you start out with the main menu and top-level anchors styled to taste, while the submenus are absolutely positioned with a negative number offscreen (this keeps it available to screen readers, who will obey display: none). When the first-level li is :hovered, or the first-level anchor is :focussed, the ul’s position changes to onscreen.

#menu li:hover ul, #menu a:focus+ul {
reset left or left margin back to 0/auto, depending on what you used;
}

(actually I usually find I have to restate a bunch of stuff with the focus statement so in real life I tend to have a separate line for the a:focus+ul stuff)

So with javascript you could easily add/remove a class to the subul to change its position by having two different classes pre-styled OR manually changing the left position property.

Now, I am a JS newb myself.

And I guess the actual answer to your question might be (I’m not 100% sure) that ul’s are blocks to begin with, and while I see you trying to set them as blocks with the
toShow.style.display = “block”;
but that doesn’t actually change anything. I suppose first you’d need to make them… not blocks, onLoad. Maybe you mean
toShow.style.display = “none” for the initial setting. This will hit screen reader users with Javascript on (more common than not), esp since they are not going to be mousing over your menu : )

[Stomme_poes]

I’m still learning Javascript, and what I can do, I write completely differently : ) but your HTML is not valid. Remember not to close the </li> until AFTER the sub ul is finished:

<li><a href="#">home</a> [b]<---no closing li here[/b]
  <ul>
  ...submenustuff
  </ul>
</li>[b]<--it goes here[/b]
<li>next anchor...

Possibly now also your JS is not seeing the sub ul as a real child of the li when it should.

---

(assuming there is no wrapping div and the ul has the id of “menu”):

So your menu is
#menu {
this is the first ul;
}
and your submenu is
#menu ul {
display: none;
}

Not tested, but it’s something like this. I’m going to try to manually change the display state.

window.onload = initAll;
    initAll = function() {
        var menu = document.getElementById('menu');
        var li = menu.getElementsByTagName('LI');
        for(var i=0, l = li.length; i<l; i++) {

            li[i].onmouseover = function() {
                showChild(this);
            }
            li[i].onmouseout = function() {
                hideChild(this);
            }
        }//end for, in case my indenting sux0rz

        function showChild(li) {
            var child = li.getElementsByTagName('UL')[0];
            if (child) {
                child.style.display='block';
            }
        }

        function hideChild(li) {
            var child = li.getElementsByTagName('UL')[0];
            if (child) {
                child.style.display='none';
            }
        }

    }; //initAll

That was, like, my very modified version of Blake Haswell’s JS. I might have broken it! Also the double declaring of child is silly, but I can’t think right now how to have the functions know it from the for loop (maybe just declaring it before the li[i].onmouseover stuff, and then mentioning them in the onmouseover/mouseout stuff, but I’m newb at closures).

Here’s another version of Blake’s JS (but still without the focussing-on-anchors stuff and without the delay he has), where we have the two functions, but all it does is swap classes.

#menu ul {
display: none;
}
#menu ul.makeBlock {
display: block;
}

window.onload = initAll;
    initAll = function() {
        var menu = document.getElementById('menu');
        var li = menu.getElementsByTagName('LI');
        for(var i=0, l = li.length; i<l; i++) {
            li[i].onmouseover = function() {
                this.className = addClass(this);
            }
            li[i].onmouseout = function() {
                this.className = removeClass(this);
            }
        }

        function addClass(li) {
            return li.className + ' ' + 'makeBlock';
        }

        function removeClass(li) {
            return li.className.replace('makeBlock', '');
        }
    };

That one I have more confidence in because it’s closer to the version I know works : )

The full Haswell JS with focussing for keyboarders and a slight hover delay for those with shakey mice can be found here. There’s a small bug in it currently, but other than that it works well.

Maybe after trying out these two (again I didn’t test the first one so it might not work lawlz sorry), maybe that will show you what’s going on with your current JS.

[wolken]

try my fix… it’s shorter and faster.

[friendOfTheFox]

I will
could you explain the idea behind it?

[wolken]

I assigned var k = i because i is a global and keeps changing. Since I don’t want the variable passed to the showMenu() to change, I declare every time a new variable “k” which is equal to the current “i”. That way when “i” changes, then the “k” I used will remain the same.

I used the onmouseover=function(){showMenu(k);} so that I can pass the variable k to the showMenu function. onmouseover = showMenu(k) does not work so I have to write: onmouseover =function(){showMenu(k);}

PS: the children elements hide when you move the mouse away from the title… I suppose that’s not the way you want it… Am I right ?

[friendOfTheFox]

@wolken

PS: the children elements hide when you move the mouse away from the title… I suppose that’s not the way you want it… Am I right ?

var handlers = function()
			{
				var k = i;
				firstLI[i].onmouseover = function(){showMenu(k);}
				childUL[i].onmouseover = function(){showMenu(k);}
				firstLI[i].onmouseout = function(){hideMenu(k);}
				childUL[i].onmouseout = function(){hideMenu(k);}
			}();
		}
	}
	
	function showMenu(i){
		secLI[i].style.display = "block";
		childUL[i].style.display = "block";
	}
	
	function hideMenu(i){
		secLI[i].style.display = "none";
		childUL[i].style.display = "none";
	}

Thanks!!!

[wolken]

use this:

		window.onload = initAll;

function initAll(){
	menuDiv = document.getElementById("menu");
	menuChildren = menuDiv.childNodes;
	
	parentUL = new Array();
	firstLI = new Array();
	catLink = new Array();
	secLI = new Array();
	childUL = new Array();
	
	for (var i=0; i < menuChildren.length; i++){
		if (menuChildren[i].nodeType == "1" && menuChildren[i].tagName == "UL" && getFirstChild(menuChildren[i],"LI") != ""){
			parentUL[i] = menuChildren[i];
			firstLI[i] = getFirstChild(parentUL[i],"LI");
			catLink[i] = getFirstChild(firstLI[i],"A");
			secLI[i] = getLastChild(parentUL[i],"LI");
			childUL[i] = getFirstChild(secLI[i],"UL")
			
			secLI[i].style.display = "none";
			childUL[i].style.dislplay = "none";
		
			var handlers =function()
			{
				var k = i;
				parentUL[i].onmouseover = function(){showMenu(k);}
				parentUL[i].onmouseout = function(){hideMenu(k);}
			}();
		}
	}
	
	function showMenu(i){
		secLI[i].style.display = "block";
		childUL[i].style.display = "block";
	}
	
	function hideMenu(i){
		secLI[i].style.display = "none";
		childUL[i].style.display = "none";
	}
	
	function getFirstChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		firstFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				if (firstFoundTag == ""){
					firstFoundTag = thisChildren[j];
					return firstFoundTag;
				}
			}
		}
	}
	
	function getLastChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		lastFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				lastFoundTag = thisChildren[j];
			}
		}
		return lastFoundTag;
	}

}

[friendOfTheFox]

That’s useful in other cases. I didn’t post the CSS here.
Anyways thanks a lot

[friendOfTheFox]

You are not annoying, you are helping (and lots of thanks for that :)).

I have created many menus using traditional methods - HTML and CSS only, using Object:hover.

The thing is, the JS instructor showed how to create a menu using only JS, however he did use classes to help relate the LINK to the UL it was suppose to set as “block”. I wanted to create one by myself.

In my example, the property display:none is set by the CSS;

Could you explain to me the thing with screen readers again?

Thanks for the help BTW.

[friendOfTheFox]

Using only CSS to make menus makes a lot of sense (especially for someone who knew CSS before JS ;)).
I couldn’t agree more on moving the menus off screen to consider the screen readers, and I will definitely implement it in my next project.
Thanx Stomme!

But I still didn’t figure out my JS mistake
I re-wrote the whole script, and it sill either makes all menus into blocks, or hides them. And I cannot make it interactive.

Is there a JS guru in town ???

Here’s what I have done so far:

<div id="menu">
	<ul>
		<li><a href ="#">Home</a></li>
		<ul>
			<li>News</li>
			<li>Gallery</li>
			<li>Blog</li>
		</ul>
	</ul>
	<ul>
		<li><a href ="#">Research</a></li>
		<ul>
			<li>Soul Shoes</li>
			<li>Helvetivca History</li>
			<li>Chicken Flags</li>
		</ul>
	</ul>
</div>

#menu ul{
	float:left;
	width:100px;
}
#menu ul li{
	display:block;
	font-size:18px;
	padding:15px 0;
	text-align:center;
}
#menu ul ul{
	display:none;
	width:150px;
}
#menu ul ul li{
	font-size:16px;
	padding:0;
	text-align:left;
	width:100%;
}

window.onload = initAll;

function initAll() {
	var allLinks = document.getElementsByTagName("a");
	
	for (var i=0; i<allLinks.length; i++) {
		if (allLinks[i].className.indexOf("menuLink") > -1) {
			allLinks[i].onclick = retFalse;
			allLinks[i].onmouseover = toggleMenu;
		}
	}
}

function toggleMenu() {
	var startMenu = this.href.lastIndexOf("/")+1;
	var stopMenu = this.href.lastIndexOf(".");
	var thisMenuName = this.href.substring(startMenu,stopMenu);
	
	document.getElementById(thisMenuName).style.display = "block";

	this.parentNode.className = thisMenuName;
	this.parentNode.onmouseout = toggleDivOff;
	this.parentNode.onmouseover = toggleDivOn;
}

function toggleDivOn() {
	document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
	document.getElementById(this.className).style.display = "none";
}
window.onload = initAll;

function initAll(){
	menuDiv = document.getElementById("menu");
	menuChildren = menuDiv.childNodes;
	
	parentUL = new Array();
	firstLI = new Array();
	catLink = new Array();
	childUL = new Array();
	
	for (var i=0; i < menuChildren.length; i++){
		if (menuChildren[i].nodeType == "1" && menuChildren[i].tagName == "UL" && retChild(menuChildren[i],"UL") != ""){
			parentUL[i] = menuChildren[i];
			firstLI[i] = retChild(menuChildren[i],"LI");
			childUL[i] = retChild(menuChildren[i],"UL");
			catLink[i] = retChild(firstLI[i],"A")
		}
	}
	
	
	function retChild(ToCheck,forTag){
		thisObjChildren = ToCheck.childNodes;
		for (var j=0; j < thisObjChildren.length; j++){
			if(thisObjChildren[j].tagName == forTag){
				return thisObjChildren[j];
			}
		}
	}

}

[friendOfTheFox]

Sure

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>My JS practice</title>
		
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<script type="text/javascript" src="script.js" >
		</script>
		
	</head>
	<body>
		<div id="wrapper">
			
			<div id="menu">
				<ul>
					<li><a href ="#">Home</a></li>
					<li>
						<ul>
							<li>News</li>
							<li>Gallery</li>
							<li>Blog</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li><a href ="#">Research</a></li>
					<li>
						<ul>
							<li>Soul Shoes</li>
							<li>Helvetivca History</li>
							<li>Chicken Flags</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li><a href ="#">Products</a></li>
					<li>
						<ul>
							<li>Shoe Shine Stand</li>
							<li>Night Lamps</li>
							<li>Eifell Tower Models</li>
							<li>B.A. Congratualtions</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li><a href ="#">About Us</a></li>
					<li>
						<ul>
							<li>Our Company</li>
							<li>World View</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li><a href ="#">Contact</a></li>
					<li>
						<ul>
							<li>
								Contact form
							</li>
						</ul>
					</li>
				</ul>
			</div>
			
		</div>
	</body>
</html>

window.onload = initAll;

function initAll(){
	menuDiv = document.getElementById("menu");
	menuChildren = menuDiv.childNodes;
	
	parentUL = new Array();
	firstLI = new Array();
	catLink = new Array();
	secLI = new Array();
	childUL = new Array();
	
	for (var i=0; i < menuChildren.length; i++){
		if (menuChildren[i].nodeType == "1" && menuChildren[i].tagName == "UL" && getFirstChild(menuChildren[i],"LI") != ""){
			parentUL[i] = menuChildren[i];
			firstLI[i] = getFirstChild(parentUL[i],"LI");
			catLink[i] = getFirstChild(firstLI[i],"A");
			secLI[i] = getLastChild(parentUL[i],"LI");
			childUL[i] = getFirstChild(secLI[i],"UL")
			
			secLI[i].style.display = "none";
			childUL[i].style.dislplay = "none";
			
			firstLI[i].onmouseover = showMenu;
			secLI[i].onmouseover = showMenu;
			childUL[i].onmouseover = showMenu;
		}
	}
	
	function showMenu(){
		secLI[i].style.display = "block";
		childUL[i].style.display = "block";
	}
	
	function hideMenu(){
		secLI[i].style.display = "none";
		childUL[i].style.display = "none";
	}
	
	function getFirstChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		firstFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				if (firstFoundTag == ""){
					firstFoundTag = thisChildren[j];
					return firstFoundTag;
				}
			}
		}
	}
	
	function getLastChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		lastFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				lastFoundTag = thisChildren[j];
			}
		}
		return lastFoundTag;
	}

}

I was thinking to add something to detect the array index of firstLI to showMenu(), and then address the matching values in secLI and childUL.

[wolken]

can you plz show the entire javascript code with the corresponding html ?

[friendOfTheFox]

I’ve been away for some time, away from work too, sry

So don’t consider this as an act of necromancy, I’m pretty sure the thread is still alive (or is it…).

Anyways, after a long battle with aptana to get the debugger working which I lost, I debugged it in firebug and eliminated all the errors I made.

Now the script builds 5 arrays with corresponding index numbers:

parentUL[i]
firstLI[i]
catLink[i]
secLI[i]
childUL[i]

for (var i=0; i < menuChildren.length; i++){
  if (menuChildren[i].nodeType == "1" && menuChildren[i].tagName == "UL" && getFirstChild(menuChildren[i],"LI") != ""){
	parentUL[i] = menuChildren[i];
	firstLI[i] = getFirstChild(parentUL[i],"LI");
	catLink[i] = getFirstChild(firstLI[i],"A");
	secLI[i] = getLastChild(parentUL[i],"LI");
	childUL[i] = getFirstChild(secLI[i],"UL")
			
	secLI[i].style.display = "none";
	childUL[i].style.dislplay = "none";
			
	firstLI[i].onmouseover = showMenu;
	secLI[i].onmouseover = showMenu;
	childUL[i].onmouseover = showMenu;
	}
}

function showMenu(){
	secLI[i].style.display = "block";
	childUL[i].style.display = "block";
}
	
function hideMenu(){
	secLI[i].style.display = "none";
	childUL[i].style.display = "none";
}

Now, the thing is: if I assign the function which shows the menu items inside the loop (like above), the function gets called after the loop is executed, so i is no longer a valid integer, and cannot be used to specify the array index.

I want to do it without classes coz this one is for learning purposes.

[friendOfTheFox]

OK I fixed it.
It’s a simple drop-down menu, without CSS classes - only JS.

Here’s what I’ve done:

window.onload = initAll;

function initAll(){
	menuDiv = document.getElementById("menu");
	menuChildren = menuDiv.childNodes;
	
	parentUL = new Array();
	firstLI = new Array();
	catLink = new Array();
	secLI = new Array();
	childUL = new Array();
	
	for (var i=0; i < menuChildren.length; i++){
		if (menuChildren[i].nodeType == "1" && menuChildren[i].tagName == "UL" && getFirstChild(menuChildren[i],"LI") != ""){
			parentUL[i] = menuChildren[i];
			firstLI[i] = getFirstChild(parentUL[i],"LI");
			catLink[i] = getFirstChild(firstLI[i],"A");
			secLI[i] = getLastChild(parentUL[i],"LI");
			childUL[i] = getFirstChild(secLI[i],"UL")
			
			secLI[i].style.display = "none";
			childUL[i].style.display = "none";
			
			firstLI[i].onmouseover = showMenu;
			childUL[i].onmouseover =showMenu;
			
			firstLI[i].onmouseout = hideMenu;
			childUL[i].onmouseout = hideMenu;
			
		}
	}
	
	function showMenu(){
		arrayVal = this;
		arrayIndex = "";
		
		for (var i=0; i < firstLI.length; i++){
			if(firstLI[i] == arrayVal){
				arrayIndex = i;
				break;
			}
		}
		for (var i=0; i < childUL.length; i++){
			if(childUL[i] == arrayVal){
				arrayIndex = i;
				break;
			}
		}
		
		secLI[arrayIndex].style.display = "block";
		childUL[arrayIndex].style.display = "block";
	}
	
	function hideMenu(){
		arrayVal = this;
		arrayIndex = "";
		
		for (var i=0; i < firstLI.length; i++){
			if(firstLI[i] == arrayVal){
				arrayIndex = i;
				break;
			}
		}
		for (var i=0; i < childUL.length; i++){
			if(childUL[i] == arrayVal){
				arrayIndex = i;
				break;
			}
		}
		
		childUL[arrayIndex].style.display = "none";
	}
	
	function getFirstChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		firstFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				if (firstFoundTag == ""){
					firstFoundTag = thisChildren[j];
					return firstFoundTag;
				}
			}
		}
	}
	
	function getLastChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		lastFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				lastFoundTag = thisChildren[j];
			}
		}
		return lastFoundTag;
	}

}

Why did you nest 2 function calls and assigned k = i; ?

[wolken]

I’m not sure what this code is exactly supposed to do… but here’s a fix… let me know.

function initAll(){
	menuDiv = document.getElementById("menu");
	menuChildren = menuDiv.childNodes;
	
	parentUL = new Array();
	firstLI = new Array();
	catLink = new Array();
	secLI = new Array();
	childUL = new Array();
	
	for (var i=0; i < menuChildren.length; i++){
		if (menuChildren[i].nodeType == "1" && menuChildren[i].tagName == "UL" && getFirstChild(menuChildren[i],"LI") != ""){
			parentUL[i] = menuChildren[i];
			firstLI[i] = getFirstChild(parentUL[i],"LI");
			catLink[i] = getFirstChild(firstLI[i],"A");
			secLI[i] = getLastChild(parentUL[i],"LI");
			childUL[i] = getFirstChild(secLI[i],"UL")
			
			secLI[i].style.display = "none";
			childUL[i].style.dislplay = "none";
		
			var handlers =function()
			{
				var k = i;
				firstLI[i].onmouseover = function(){showMenu(k);}
				firstLI[i].onmouseout = function(){hideMenu(k);}
			}();
		}
	}
	
	function showMenu(i){
		secLI[i].style.display = "block";
		childUL[i].style.display = "block";
	}
	
	function hideMenu(i){
		secLI[i].style.display = "none";
		childUL[i].style.display = "none";
	}
	
	function getFirstChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		firstFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				if (firstFoundTag == ""){
					firstFoundTag = thisChildren[j];
					return firstFoundTag;
				}
			}
		}
	}
	
	function getLastChild(toCheck,forTag){
		thisChildren = toCheck.childNodes;
		lastFoundTag = "";
		for (var j=0; j < thisChildren.length; j++){
			if(thisChildren[j].tagName == forTag){
				lastFoundTag = thisChildren[j];
			}
		}
		return lastFoundTag;
	}

}