C and S Design.
Search Friendly Programming and Design

' HTML Code for the menu
' edit and add links as required
' copy and paste into an included file or pages.
<div id="menu_block">
<div class="menu_item" _ 
	id="one"><a href="#" _ 
	onMouseOver="ToggleSub('one');">Category
1</a>
<div class="sub_menu" _ 
	id="sub_one">
<div><a href="#">Menu _ 
	1</a></div>
<div><a href="#">Menu _ 
	2</a></div>
<div><a href="#">Menu _ 
	3</a></div>
<div><a href="#">Menu _ 
	4</a></div>
<div><a href="#">Menu _ 
	5</a></div>
</div> <!-- sub_menu -->
</div> <!-- menu_item -->
<div class="menu_item" _ 
	id="two"><a href="#" _ 
	onMouseOver="ToggleSub('two');">Category
2</a>
<div class="sub_menu" _ 
	id="sub_two">
<div><a href="#">Menu _ 
	1</a></div>
<div><a href="#">Menu _ 
	2</a></div>
<div><a href="#">Menu _ 
	3</a></div>
<div><a href="#">Menu _ 
	4</a></div>
<div><a href="#">Menu _ 
	5</a></div>
<div><a href="#">Menu _ 
	6</a></div>
<div><a href="#">Menu _ 
	7</a></div>
<div><a href="#">Menu _ 
	8</a></div>
<div><a href="#">Menu _ 
	9</a></div>
<div><a href="#">Menu _ 
	10</a></div>
</div> <!-- sub_menu -->
</div> <!-- menu_item -->
<div class="menu_item" _ 
	id="three"><a href="#" _ 
	onMouseOver="ToggleSub('three');">Category
3</a>
<div class="sub_menu" _ 
	id="sub_three">
<div><a href="#">Menu _ 
	1</a></div>
<div><a href="#">Menu _ 
	2</a></div>
<div><a href="#">Menu _ 
	3</a></div>
<div><a href="#">Menu _ 
	4</a></div>
<div><a href="#">Menu _ 
	5</a></div>
</div> <!-- sub_menu -->
</div> <!-- menu_item -->
</div> <!-- menu_block -->
<div class="spacer"></div>

'*******************************************
' javascript functions  copy and past in to an external .js _ 
	file.
var Menu = new _ 
	Array("one","two","three"); // _ 
	,"four","five");

function ShowMenu(MenuID) {
document.getElementById(MenuID).style.display = 'block';
}
function HideMenu(MenuID) {
document.getElementById(MenuID).style.display = 'none';
}

function CollapseAll() {
for (i=0; i<=Menu.length-1; i++) {
//		if (MenuId != Menu[i]) {
		document.getElementById('sub_'+Menu[i]).style.display = _ 
	'none';
		document.getElementById('sub_'+Menu[i]).style.position = _ 
	'absolute';
//		}
}
}

function ShowAll() {
for (i=0; i<=Menu.length-1; i++) {
document.getElementById('sub_'+Menu[i]).style.display = _ 
	'block';
}
}

function ToggleAll() {
for (i=0; i<=Menu.length-1; i++) {
	if (document.getElementById(Menu[i]).style.display == _ 
	'block')
		{
		document.getElementById(Menu[i]).style.display = 'none';
		}
		else
		{
		document.getElementById(Menu[i]).style.display = 'block';
		}
}
}

function ToggleSub(MenuId) {
x = 'sub_'+MenuId;
CollapseAll();
		document.getElementById(x).style.display = 'block';
}

 _ 
	'****************************************************************
' CSS style definitions
' copy and paste into an external .css file
#menu_block {
	position:relative;
	text-align:left;
	float:left;
	width:90%;
	margin:5px 5px 10px 0px;
	border:1px solid red;
	background-color:transparent;/*#CCCCCC; */
	z-index:1;
}
.menu_item {
	position:relative;
	float:left;
	text-indent:10px;
	font-size:1.0em;
	font-weight:bold;
	z-index:1;
}	
.menu_item a{
	text-decoration:none;
}
.menu_item a:link{
	text-decoration:none;
}
.menu_item a:visited{
	text-decoration:none;
}
.menu_item a:hover{
	text-decoration:none;
	color:#0000FF;
	background-color:transparent;
}
.menu_item a:active{
	text-decoration:none;
}
.sub_menu {
	position:relative;
	top:15px;
	left:5px;
	text-indent:5px;
	font-size:0.75em;
	font-weight:normal;
	width:95%;
	display:block;
	text-align:left;
	background-color:#FFFFCC;
	padding:0px 0px 0px 5px;
	margin:0px 0px 10px 0px;
	border:1px red solid;
	z-index:10;
}
.sub_menu a{
	text-decoration:none;
	z-index:10;
}
.sub_menu a:link{
	text-decoration:none;
}
.sub_menu a:visited{
	text-decoration:none;
}
.sub_menu a:hover{
	text-decoration:underline;
	color:orange;
	background-color:transparent;
}
.sub_menu a:active{
	text-decoration:none;
}
.blue {
	background-color:#0000FF;
}
.yellow {
	background-color:#FFFF99;
}
.red {
	background-color:#FF6666;
}
.orange {
	background-color:#FFCC00;
}
.green {
	background-color:#00CC33;
}
.menu_tab {
	position:relative;
	float:left;
	color:#000000;
	margin:0px 5px 0px 2px;
	border:1px solid #000000;
}
/* content definition to override global */
/*#content {
	position:relative;
	float:left;
	width:760px;
}
*/