8bit Solutions

I wrote this bit of code after getting fed up with all the Sucker Fish versions out there. I wanted a dropdown navigation system that just worked with out having to modifiy it based on the number of levels I needed =, and that would work across the various Content Managment Systems I work in.

So I set out to combine all the best parts from the various Sucker Fish version swimming around the inter web and a couple of days testing later I had come up with what I call the RockFish Dropdown Navigation. RockFish is so named becuase it has been stripped down to the bedrock of code that is need to make it function, allowing you to modifiy as you see fit with the greates of ease. I now use RockFish as the basis for all the dropdown menus I create.

@charset "utf-8";
/* CSS Document */
/* RockFish Dropdown Navigation */
/* Written by: Charlie Brumfield 2008 */
/* Free to use as you wish. */

#navigationContainer{ /*create a styles for our navigationContainer div to hold our navigation */
	position:absolute; /* you can use relative, doesn't matter just need a postion set for the z-index to work correctly */
	z-index:100; /* ensures out navigation will be on top of any flash elements.*/
}
#navigation, #navigation ul { /* set your genral list styles*/
	padding: 0; /* loose all padding */
	margin: 0; /* loose all margins */
	list-style: none; /* remove the bullet from the list items */
	line-height: 25px; /* sets your line height, you'll need to edit this based on your font height so the hover class will work correctly */
}
#navigation a { /* set all styling for main level links */
	display: block; /* make the a tag finction like a div tag*/
}
#navigation li { /* all list items */
	float: left; /* make our list items line you in a hoizontal line */
}
#navigation li ul { /* sub menus */
	clear:left; /* ensure the sub level links do not float to the left of the main link. remove this for verticle menues */
	position: absolute; /* needed for hiding the sub menus*/
	background: #000000; /* set background color to black for our sub menues*/
	width: 100px; /* need to set a width to keep the line items from floating */
	left: -999em; /* use left instead of display:none to hide sub menus since screen readers won't read anything in display:none */
}
#navigation li ul li{ /* sub menu list items */
	width:100px; /* this needs to be the same as the width in #navigation li ul */
}
#navigation li ul a { /* set styling for sub level links */
	color:#FFFFFF; /* color is set to white since our background in this example is black */
}
#navigation li ul a:hover { /* set styles for the user mouses over the sub links */
	color:#CCCCCC; /* set color to grey */
}
#navigation li ul ul { /* third-and-lower-level lists */
	margin-left:100px; /* make all list past the second inset and extra 100px so they do not overlap */
}
#navigation li:hover > ul, #navigation .rockFishHover{ /* show submenu directly inside the correct li tag */   
	left: auto; /* on mouse over bring the sub links back from the left:-999em we set earlier */
}
#navigation li:hover { /* edit the li:hover class */
	position: static; /* fixing some browsers buggy handeling of the hover state */
}

The CSS is pretty self explainatory, especially if you've used any of the Sucker Fish CSS menu's before. The big diffrence is the last couple of styles. The #navigation li:hover > ul, #navigation .rockFishHover style places the sub menu's (the unordered lists that contain the links) direcly under the list item tag containing it. The keeps you from having to ad to the CSS code for each level of links you need.

// Java Document
// RockFish JavaScript
// Written By Charlie Brumfield 2008
// Free to use as you wish.

RockFishHover = function() { // makes the RockFishHover function we call in our css style sheet to make IE behave lke a good browser (sf stands for sucker fish in case your wondering)     
	var RockFishEls = document.getElementById("navContainer").getElementsByTagName("LI"); // here we use get Element By arguments to see what id and tag sfHover's be used on. we only want to use it on nav and li, so only look for those    
	for (var i=0; i