CSS and Javascript Menu

[Skemcin]

Alright, I've failed miserably trying to get this to work. Basically, I'd like two rows of links. When you mouseover the top row, the subset of links associated with it appear underneath it horizontally. I am trying to recreate the macromedia.com navigation style with CSS and Javascript - I'd even like it better without javascript.My problem has been either getting it to work in Firefox and it not working in Internet Explorer, or when I position the second row correctly it disappears when I mouseoff the parent navigation.I've hacked through several conceptualizations with my code so far, here is my latest. In this case, the mouseover and off work as far as being able to stay in the respective second row links - only they are not in the second row:http://www.iribbit.net/_files/nav-horizontal-2rows.cfm(view source - its all in there)But, here it is for those who wish to see it here:

<script language="javascript" type="text/javascript">////////////////////////// navigation control //////////////////////////function showhide(id){	if (document.getElementById){		obj = document.getElementById(id);		if (obj.style.display == "none"){		obj.style.display = "";		} else {		obj.style.display = "none";		}	}}</script><style type="text/css" media="all" title="Horizontal Navigation">/* navigation classes */ul.nav-parent,li.nav-parent {	margin:0px;	padding:0px;	background-color:#CCCCCC;	display:inline;}ul.nav-child,li.nav-child {	margin:0px;	padding:0px;	background-color:#FFFFCC;	display:inline;	width:100%;}</style><ul class="nav-parent">	<!-- parent link 1 -->	<li class="nav-parent" onmouseover="showhide('set1'); return(false);" onmouseout="showhide('set1'); return(false);">	<a href="/_files/nav-horizontal-2rows.cfm" title="Parent Link 1">Parent Link 1</a>	<ul class="nav-child" id="set1" style="display:none;">		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 1a">Child Link 1a</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 1b">Child Link 1b</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 1c">Child Link 1c</a></li>	</ul>	</li>	<!-- parent link 2 -->	<li class="nav-parent" onmouseover="showhide('set2'); return(false);" onmouseout="showhide('set2'); return(false);">	<a href="/_files/nav-horizontal-2rows.cfm" title="Parent Link 2">Parent Link 2</a>	<ul class="nav-child" id="set2" style="display:none;">		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 2a">Child Link 2a</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 2b">Child Link 2b</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 2c">Child Link 2c</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 2d">Child Link 2d</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 2e">Child Link 2e</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 2f">Child Link 2f</a></li>	</ul>	</li>	<!-- parent link 3 -->	<li class="nav-parent" onmouseover="showhide('set3'); return(false);" onmouseout="showhide('set3'); return(false);">	<a href="/_files/nav-horizontal-2rows.cfm" title="Parent Link 3">Parent Link 3</a>	<ul class="nav-child" id="set3" style="display:none;">		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 3a">Child Link 3a</a></li>		<li class="nav-child"><a href="/_files/nav-horizontal-2rows.cfm" title="Child Link 3b">Child Link 3b</a></li>	</ul>	</li></ul>

Less is more for me. I'd like to keep this as trimmed down as possible.Thanks in advance for the help.

[Err]

Link: http://www.dynamicdrive.com/dynamicindex5/linkinfo.htmandLink: http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htmThose links can help you do that.

[Skemcin]

thanks, but a little too much code and too sloppy. I know I can do this with tables - I could to it the traditional way real easily, I'm hoping to get this done in CSS with very little JS.This is close to I want - with tables:

<script language="javascript" type="text/javascript">////////////////////////// navigation control //////////////////////////function showhide(id){	if (document.getElementById){		obj = document.getElementById(id);		if (obj.style.display == "none"){		obj.style.display = "";		} else {		obj.style.display = "none";		}	}}</script><cfoutput><!-- parent navigation --><table width="750" border="1"><tr><td onmouseover="showhide('set1');" style="background-color:##FFFF99; height:25px;"><a href="#cgi.script_name#" title="Parent Link 1">Parent Link 1</a><br /></td><td onmouseover="showhide('set2');" style="background-color:##FFFF99; height:25px;"><a href="#cgi.script_name#" title="Parent Link 2">Parent Link 2</a><br /></td><td onmouseover="showhide('set3');" style="background-color:##FFFF99; height:25px;"><a href="#cgi.script_name#" title="Parent Link 3">Parent Link 3</a><br /></td></tr></table><!-- child navigation --><table width="750" border="1"><tr><td style="background-color:##FFFFCC; height:25px;"><div class="nav-child" id="set1" style="display:none;" onmouseout="showhide('set1');"><a href="#cgi.script_name#" title="Child Link 1a">Child Link 1a</a><a href="#cgi.script_name#" title="Child Link 1b">Child Link 1b</a><a href="#cgi.script_name#" title="Child Link 1c">Child Link 1c</a></div><div class="nav-child" id="set2" style="display:none;" onmouseout="showhide('set2');"><a href="#cgi.script_name#" title="Child Link 2a">Child Link 2a</a><a href="#cgi.script_name#" title="Child Link 2b">Child Link 2b</a><a href="#cgi.script_name#" title="Child Link 2c">Child Link 2c</a><a href="#cgi.script_name#" title="Child Link 2d">Child Link 2d</a><a href="#cgi.script_name#" title="Child Link 2e">Child Link 2e</a><a href="#cgi.script_name#" title="Child Link 2f">Child Link 2f</a></div><div class="nav-child" id="set3" style="display:none;" onmouseout="showhide('set3');"><a href="#cgi.script_name#" title="Child Link 3a">Child Link 3a</a><a href="#cgi.script_name#" title="Child Link 3b">Child Link 3b</a></div></td></tr></table></cfoutput>

Source Code of:http://www.iribbit.net/_files/nav-tables.cfmIts just too figity and not coded 100% correctly.

[Skemcin]

***** RESOLVED *****Finally got it working the way I want it. Aside giving it some life and cleaning the code up a little more, I just need to figure out a way to reset the sub nav back to the default once I mouseout of the entire navigation section. A couple things I've tried haven't worked - but I'll figure it out.(my thought is just to put an element directly below it (like a third row) that is 1 pixel tall and with a mouse over on that, toggle it back to the default.http://www.iribbit.net/_files/nav-toggle.cfmThis is done with all CSS, no tables, and a little javascript. Works fine in Firefox, Internet Explorer, and Netscape. Since I don't have Opera installed at home, can someone let me know how it looks loaded in that browser? Feedback from any MAC users would be nice as well.This will be fun now to get this database driven next!

[Jonas]

I've watched it in Opera. Looks ok to me. And if you want Opera, you know where to look... | |\/

[Skemcin]

Yeah, just haven't gotten around to it here at home - I'll download the big O eventually.I did add the extra code to reset the menu once you mouseout of it all together.http://www.iribbit.net/_files/nav-toggle.cfm