suckerfish type menu problem

not sure but I will work on that one I have this one here that works in IE so far needs some more tweeking. Here is the code so if anyone wants to mess with it.

/* CSS here first */
-----------------------
body {
	font-family: arial, helvetica, serif;
}

ul { /* all lists */
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;
}

li { /* all list items */
	background: #ffcc55;
	width: 150px;
	height: 1em;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: none;
	padding: 0;
	margin: 0 0 0 0;
	color: #000000;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 2em;
	font-size:    xx-small;
}
ul li {
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;}
ul {
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;}
ul li a:hover {
	color: #000;background:#fff;text-decoration: none;}
ul li a:active,a:link,a:visited{color:#000;background:none;}
	
li ul { /* second-level lists */
	display: none;text-align: center;
	padding: 0;	margin: 0;
	float: left;top: 1em;left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}
html> ul li a  {font-size: x-small;}
li:active ul, li.over ul, a:active{background: #c60;
	color: #fff; }
li:hover ul, li.over ul, a:hover{ /* lists nested under hovered list items */
	display: block;color: #000;	background: #ccc;
	}
#content {
	clear: left;
}

and then you will need the famous suckerfish IE javascript fix which I am including also here

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

and then finally the html part:

<ul id="nav">

	<li>Sunfishes
		<ul>
			<li><a href="">Blackbanded sunfish</a></li>
			<li><a href="">Shadow bass</a></li>
			<li><a href="">Ozark bass</a></li>
			<li><a href="">White crappie</a></li>

		</ul>
	</li>

	<li>Grunts
		<ul>
			<li><a href="">Smallmouth grunt</a></li>
			<li><a href="">Burrito</a></li>
			<li><a href="">Pigfish</a></li>

		</ul>
	</li>

	<li>Remoras
		<ul>
			<li><a href="">Whalesucker</a></li>
			<li><a href="">Marlinsucker</a></li>
			<li><a href="">Ceylonese remora</a></li>

			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Slender suckerfish</a></li>
		</ul>
	</li>

</ul>

Like I said it works good in IE6 but I need to tweek it some to work in netscape and others. If anyone else hacks it and gets it working in netscape before I do holla *grin*

I will also be working on the vert version that you are asking about here, hopefully tomorrow or early next week I will have something for ya.

Keep coding like there is no time left.......*grin*

ok update on code, I got it to work in Mozilla 1.x and IE 6.x I am assuming cause it worked in mozilla it would work in netscape. all I am going to post this time is the CSS since everything else has stayed the same.

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

li { /* all list items */
	float: left;background:#ffcc55;
	position: relative;text-align:center;
	width: 10em;width:150px;
	font-size:12px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: none;
	padding:0;
	margin: 0 0 0 0;
	color: #000000;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 2em;
	}

	
li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 2em;
	left: 0;
}
ul li a:link,a:active,a:visited {color:#000;font-size:xxsmall;background:none;decoration:none;}
li:hover ul, li.over ul, a:hover{ /* lists nested under hovered list items */
	display: block;color: #000;	background: #fff;decoration:none;}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

#content {
	clear: left;
}
/* ########### Netscape workaround #############*/
a.li:link{background:none;color:#000;text-decoration:none;}
a.li:active{background:none;color:#000;text-decoration:none;}
a.li:visited{background:none;color:#000;text-decoration:none;}
a.li:hover{background:#fff;color:#000;text-decoration:none;}
/* ########### Netscape workaround #############*/
</style>

well in the HTML I had to add class = li to the list like this:

<li>Sunfishes
		<ul>
			<li><a href="" class="li">Blackbanded sunfish</a></li>

But it now works in mozilla and IE still tweeking it some more so will share when I get it.