2 bar horizontal nav menu issues

[Cliffo]

I recently created my first theme shortly after leaning css, but i am having trouble with my navbar. The main bar is a list with images, then when a user hovers over one a list drops horizontally on the bar below. Problem is when trying to click far off links it is very easy to slip and the menu disappears. What i need is some sort of delay to prevent this, or some way to make the menu show after clicking instead of hovering. Here is my code, i have two questions;1) I have never written a theme before, is this the proper way to code a navbar? (i hear making an actual list is important)2) How can i add a hover delay or change the submenu to be click activated?Here is a link to my test site so you can see it in action.

div#navi {	width: 960px;	height: 39px;}ul.navi {	margin:-2px 0px -2px -40px;}ul.navi, ul.navi li {	float: left;	list-style:none;}ul.navi li ul {	display: none;}ul.navi li:hover ul {	display:block;	list-style: none;	position:absolute;}ul.navi li:hover ul li {	padding-right:50px;}ul.navi li:hover ul li a{	color:#FFF;}ul.navi li:hover ul li a:hover{	color:#FFF;}div#navi2 {	width: 960px;	height: 29px;	background-image:url(images/nav_bottom.gif);	margin-top:-5px;

<div id="navi">	<ul class="navi">	  <li><a href="/index.php"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_01.gif" /></a>		<ul>		  <li><a href="/index.php?site=news">News</a></li>		  <li><a href="/index.php?site=news&action=archive">Archives</a></li>		  <li><a href="/index.php?site=articles">Articles</a></li>		  <li><a href="/index.php?site=calendar">Calendar</a></li>		  <li><a href="/index.php?site=faq">FAQ</a></li>		  <li><a href="/index.php?site=search">Search</a></li>		</ul>	  </li>	  <li><a href="/index.php?site=forum"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_02.gif" /></a></li>	  <li><a href="/index.php?site=squads"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_03.gif" /></a>		<ul style="margin-left:-255px;">		  <li><a href="/index.php?site=about">About Us</a></li>		  <li><a href="/index.php?site=squads">Squads</a></li>		  <li><a href="/index.php?site=members">Members</a></li>		  <li><a href="/index.php?site=clanwars">Matches</a></li>		  <li><a href="/index.php?site=history">History</a></li>		  <li><a href="/index.php?site=awards">Awards</a></li>		</ul>	  </li>	  <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_04.gif" />		<ul style="margin-left:-320px;">		  <li><a href="/index.php?site=forum">Forums</a></li>		  <li><a href="/index.php?site=guestbook">Guestbook</a></li>		  <li><a href="/index.php?site=registered_users">Registered Users</a></li>		  <li><a href="/index.php?site=whoisonline">Online Users</a></li>		  <li><a href="/index.php?site=polls">Polls</a></li>		  <li><a href="/index.php?site=server">Servers</a></li>		</ul>	  </li>	  <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_05.gif" />		<ul style="margin-left:-330px;">		  <li><a href="/index.php?site=files">Downloads</a></li>		  <li><a href="/index.php?site=tutorials">Tutorials</a></li>		  <li><a href="/index.php?site=movies">Movies</a></li>		  <li><a href="/index.php?site=gallery">Photos</a></li>		  <li><a href="/index.php?site=links">Weblinks</a></li>		  <li><a href="/index.php?site=demos">Demos</a></li>		</ul>	  </li>	  <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_06.gif" />		<ul style="margin-left:-710px;">		  <li><a href="/index.php?site=sponsors">Sponsors</a></li>		  <li><a href="/index.php?site=partners">Partners</a></li>		  <li><a href="/index.php?site=newsletter">Newsletter</a></li>		  <li><a href="/index.php?site=contact">Contact Us</a></li>		  <li><a href="/index.php?site=challenge">Fight Us</a></li>		  <li><a href="/index.php?site=joinus">Join Us</a></li>		  <li><a href="/index.php?site=linkus">Link Us</a></li>		  <li><a href="/index.php?site=imprint">Imprint</a></li>		</ul>	  </li>	</ul>  </div>  <div id="navi2"></div>

Here are the two js scripts i tried, honestly I am not sure how to use them and couldn't get either to work. I think i installed them in the proper places, but i dont think i edited them to work properly;

var delay = 500; /* milli seconds */function attachHooks() {	var menu = document.getElementById("navi");	var menuItems = menu.getElementsByTagName("ul.navi li ul");	currentHover = menuItems[0];	for (var i = 0; i < menuItems.length; i++) {		menuItems[i].onmouseover = function () {activateMenuWithDelay(this);};		menuItems[i].onmouseout = function () {deactivateMenuWithDelay(this);};	}}function activateMenuWithDelay(ele) {	if(ele.timer) {		clearTimeout(ele.timer);	}	ele.timer = setTimeout(function(){activateShowMenu(ele)}, delay);}function activateShowMenu(ele) {	var parent = ele;	parent.className = "showMenu";}function deactivateMenu(ele) {	var parent = ele;	parent.className = " ";}function deactivateMenuWithDelay(ele) {	if(ele.timer) {		clearTimeout(ele.timer);	}	ele.timer = setTimeout(function(){deactivateMenu(ele)}, delay);}function initMenuDelay() {	attachHooks();	deactivateMenu();}function addLoadEvent(func) {	var oldonload = window.onload;	if (typeof window.onload != 'function') {	 	window.onload = func;	} else {	 	window.onload = function() {	 	oldonload();	 	func();	 	}	}}addLoadEvent(attachHooks);

<script type="text/javascript">sfHover = function() {	  var sfEls = document.getElementById("navi").getElementsByTagName("li");	  for (var i=0; i<sfEls.length; i++) {			sfEls[i].onmouseover=function() {				  this.className+=" sfhover";			}			sfEls[i].onmouseout=function() {				  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");			}	  }}if (window.attachEvent) window.attachEvent("onload", sfHover);</script>

Any help is appreciated!

[Cliffo]

Little help please?

[justsomeguy]

It might be better to leave the menu there instead of disappearing automatically, it would only disappear if you went to another menu. If you want to do that, you can remove the onmouseout event and have the activateMenuWithDelay function deactivate all menus before showing the one you selected. e.g.:

function activateMenuWithDelay(ele) {	var menu = document.getElementById("navi");	var menuItems = menu.getElementsByTagName("ul.navi li ul");	for (var i = 0; i < menuItems.length; i++) {		deactivateMenu(menuItems[i]);	}	if(ele.timer) {		clearTimeout(ele.timer);	}	ele.timer = setTimeout(function(){activateShowMenu(ele)}, delay);}