.

topItem {
background: #6D929B;
background-image: url(close.gif);
background-position:right center;
background-repeat:no-repeat;
padding-left:3px;
height:22px;
cursor:pointer;
text-decoration: none;
color: #C1DAD6;
font-weight:bold;
font-family:�GOTHIC�;
}

.topItemOver {
padding-left:3px;
background: #6D929B;
background-image: url(open.gif);
background-position:right center;
background-repeat:no-repeat;
height:22px;
cursor:pointer;
text-decoration: none;
color: #C1DAD6;
font-weight:bold;
font-family:�GOTHIC�;
}

.dropMenu {
background:#B7AFA3;
filter:alpha(opacity=100);
border:1px solid #6D929B;
}

.subMenu {
display:block;
}

.subItem {
height:21px;
padding-left:10px;
cursor:pointer;
font-weight:bold;
text-decoration:none;
color:#6D929B;
}

.subItem a {
text-decoration:none;
color:#6D929B;
}

.subItemOver {
height:21px;
padding-left:10px;
cursor:pointer;
font-weight:bold;
}
.subItemOver a {
color:#485C5A;
text-decoration:none;
}

.drop {
border-left:1px solid black;
border-right:1px solid black;
}

.topItem1 {
background: #3366CC;
background-image: url(close.gif);
background-position:right center;
background-repeat:no-repeat;
padding-left:3px;
height:22px;
cursor:pointer;
text-decoration: none;
color: #FFFFFF;
font-weight:bold;
font-family:�GOTHIC�;
}

.topItem1Over {
padding-left:3px;
background: #3366CC;
background-image: url(open.gif);
background-position:right center;
background-repeat:no-repeat;
height:22px;
cursor:pointer;
text-decoration: none;
color: #FFFFFF;
font-weight:bold;
font-family:�GOTHIC�;
}

.dropMenu1 {
background:#6699FF;
filter:alpha(opacity=100);
border:1px solid #3366CC;
}

.subMenu1 {
display:block;
}
.subItem1 {
height:21px;
padding-left:10px;
cursor:pointer;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}

.subItem1 a {
text-decoration:none;
color:#FFFFFF;
}

.subItem1Over {

height:21px;
padding-left:10px;
cursor:pointer;
font-weight:bold;
}

.subItem1Over a {
color:#003399;
text-decoration:none;
}

.topItem2 {
background: #84596B;
background-image: url(close.gif);
background-position:right center;
background-repeat:no-repeat;
padding-left:3px;
height:22px;
cursor:pointer;
text-decoration: none;
color: #FFFFFF;
font-weight:bold;
font-family:�GOTHIC�;
}

.topItem2Over {
padding-left:3px;
background: #84596B;
background-image: url(open.gif);
background-position:right center;
background-repeat:no-repeat;
height:22px;
cursor:pointer;
text-decoration: none;
color: #FFFFFF;
font-weight:bold;
font-family:�GOTHIC�;
}

.dropMenu2 {
background:#B58AA5;
filter:alpha(opacity=100);
border:1px solid #84596B;
}

.subMenu2 {
display:block;
}

.subItem2 {
height:21px;
padding-left:10px;
cursor:pointer;
font-weight:bold;
text-decoration:none;
 color:#CECFCE;
}

.subItem2 a {
text-decoration:none;
color:#CECFCE;
}

.subItem2Over {
height:21px;
padding-left:10px;
cursor:pointer;
font-weight:bold;
}

.subItem2Over a {
color:#FFFFFF;
text-decoration:none;
}

<!� Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. �>

<script type=�text/javascript� src=�xpMenu.css�></script>

<!� Paste this code into an external JavaScript file named: xpMenu.js �>

/* This script and many more are available free online at

The JavaScript Source :: http://www.javascriptsource.com
Created by: Eric Simmons :: http://www.jswitch.com */

/************************************************************************
Author: Eric Simmons
Contact: info AT jswitch DOT com
Website: http://www.jswitch.com
Version: 2.0 12/2005

DISCLAIMER: THIS SOFTWARE IS PROVIDED �AS IS� AND WITHOUT ANY EXPRESS
OR IMPLIED WARRANTIES, JSWITCH.COM IS NOT RESPONSIBLE FOR ANY ADVERSE
AFFECTS TO YOUR COMPUTER OR SYSTEMS RUNNING THIS SCRIPT.

LICENSE: YOU ARE GRANTED THE RIGHT TO USE THE SCRIPT PERSONALLY OR
COMMERCIALLY. THE AUTHOR, WEBSITE LINKS AND LICENSE INFORMATION IN THE
HEADER OF THIS SCRIPT MUST NOT BE MODIFIED OR REMOVED. IF PORTIONS OF
THE CODE ARE TRANSFERED TO ANOTHER SCRIPT THE AUTHORS NAME AND CONTACT
INFORMATION MUST BE STATED IN THE NEW SCRIPT BY THE PORTIONS CODE THAT
HAVE BEEN TRANSFERED.

Notes:

If you want a menu to be open initially set the style display to

�inline� in the subMenu class div like this:
<div class=�subMenu� style=�display:inline;�>

The fading effect can be disabled by setting the doFading var to

false.

***********************************************************************/

var menuObjArray = new Array();

menuObjArray[0] = new Array();
menuObjArray[1] = new Array();
menuObjArray[2] = new Array();
menuObjArray[3] = new Array();
menuObjArray[4] = new Array();
menuObjArray[5] = new Array();
menuObjArray[6] = new Array();
menuObjArray[7] = new Array();

var timerSlide = null;

var numMenuItem = 0;
var slideDelay = 15;
var divHeight = 21;
var moveSlidePix = 5;
var isLocked = false;
var doFading = true;

InitAll();

function InitAll() {
var divs = document.getElementsByTagName(�DIV�);
menuStateAry = GetUserCookie(�xpMenuCookv2�).split(�,�);

aryNum = 0;
for(dn=0; dn < divs.length;dn++) {
if(String(divs.item(dn).className).substring(0,7) == �topItem�) {
mainMenuDiv = divs.item(dn).parentNode;
menuContainerDiv= mainMenuDiv.getElementsByTagName(�DIV�).item(1);
itemContainerDiv= menuContainerDiv.getElementsByTagName(�DIV�).item(0);
if(menuStateAry != 0)
itemContainerDiv.style.height = parseInt(menuStateAry[aryNum]) + �px�;
if(!doFading) {
if (menuContainerDiv.filters)
menuContainerDiv.filters.alpha.opacity = 100;
else
menuContainerDiv.opacity = 1;
}
if(menuStateAry != 0 ) {
if( parseInt(menuStateAry[aryNum]) == 0)
itemContainerDiv.style.display = �none�;
else
itemContainerDiv.style.display = �inline�;
}
Init(divs.item(dn));
aryNum++;
}
}
}

function Init(objDiv) {
if (isLocked)
 return;
var mainMenuDiv, subMenuDiv, menuContainerDiv, itemContainerDiv,styleRules;
for(r=0;r < document.styleSheets.length; r++) {
if( -1 != String(document.styleSheets[r].href).indexOf(�xpMenu.css�) )
break;
}
if(!document.styleSheets[r].rules)
styleRules = document.styleSheets[r].cssRules;
else
styleRules = document.styleSheets[r].rules;

numMenuItem = 0;
mainMenuDiv = objDiv.parentNode;
subMenuDiv = mainMenuDiv.getElementsByTagName(�DIV�).item(0);

menuContainerDiv= mainMenuDiv.getElementsByTagName(�DIV�).item(1);
itemContainerDiv= menuContainerDiv.getElementsByTagName(�DIV�).item(0);

aLen = menuObjArray[0].length;
for (i=0 ;i < aLen ; i++) {
if (menuObjArray[0][i] == menuContainerDiv) {
break;
}
}

if (i == aLen) {
menuObjArray[0][i] = menuContainerDiv;
menuObjArray[1][i] = itemContainerDiv;
menuObjArray[7][i] = subMenuDiv;
subMenuDiv.onclick = SetSlide;
lastmenuNum = -1;
for (b=0;b<itemContainerDiv.childNodes.length;b++) {
if (itemContainerDiv.childNodes.item(b).tagName == �SPAN�) {
numMenuItem ++;
itemContainerDiv.childNodes.item(b).onmouseover= ChangeStyle;
itemContainerDiv.childNodes.item(b).onmouseout= ChangeStyle;
lastmenuNum = b;
}
}
for(r=0;r < styleRules.length; r++) {
tmpStr1 = String(styleRules[r].selectorText);
tmpStr2 = String(�.� +
itemContainerDiv.childNodes.item(lastmenuNum).className);
if(tmpStr1 == tmpStr2) {
if(NaN != parseInt(styleRules[r].style.height)) {
divHeight = parseInt(styleRules[r].style.height);
break;
}
}
}

menuObjArray[2][i] = numMenuItem;
menuObjArray[3][i] = mainMenuDiv;

if (itemContainerDiv.style.display == �inline�) {
menuObjArray[4][i] = numMenuItem * divHeight;
menuObjArray[0][i].style.height = numMenuItem * divHeight + �px�;
menuObjArray[6][i] = true;
if(doFading) {
 if (menuObjArray[0][i].filters)
menuObjArray[0][i].filters.alpha.opacity = 100;
else
menuObjArray[0][i].style.opacity = 1;
}
} else {
menuObjArray[7][i].className = menuObjArray[7][i].className+�Over�;
menuObjArray[4][i] = 0;
menuObjArray[0][i].style.height = 0 + �px�;
menuObjArray[6][i] = false;
if(doFading) {
if (menuObjArray[0][i].filters)
menuObjArray[0][i].filters.alpha.opacity = 0;
else
menuObjArray[0][i].style.opacity = .0;
}
}

}//end if

mainMenuDiv = null;
subMenuDiv = null;
menuContainerDiv= null;
itemContainerDiv= null;
}

function SetSlide() {
if (isLocked)
return;
else
isLocked = true;
for (i=0 ;i < menuObjArray[0].length; i++) {
if (menuObjArray[3][i] == this.parentNode) {
if (menuObjArray[5][i] == null)
menuObjArray[5][i] = setInterval(�RunSlide(� + i + �)�, slideDelay);
break;
}
}
}

function UpdateUserCookie(aryIndex) {
date = new Date();
date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30));
document.cookie = �xpMenuCookv2� + �=� + escape(menuObjArray[4].toString()) + �;
expires=� + date.toGMTString();
}

function GetUserCookie(crumbName) {
colCookie = document.cookie.split(�; �);
for (a=0; a < colCookie.length; a++) {
colCrumb = colCookie[a].split(�=�);
if(colCrumb[0] == crumbName)
return unescape(colCrumb[1]);
}
return ��;
}
function RunSlide(objIndex) {
if (menuObjArray[6][objIndex]) {
if(doFading) {
if(menuObjArray[0][objIndex].filters)
menuObjArray[0][objIndex].filters.alpha.opacity -= 100/
( ( (menuObjArray[2][i] * divHeight) / moveSlidePix) +1);
else
menuObjArray[0][objIndex].style.opacity -= .9/(((menuObjArray[2][i] *
divHeight) / moveSlidePix)+1);
}
menuObjArray[1][objIndex].style.display = �none�;
menuObjArray[4][objIndex] -= moveSlidePix;
if (menuObjArray[4][objIndex] > 0)
menuObjArray[0][objIndex].style.height = menuObjArray[4][i] + �px�;
else {
if(doFading) {
if(menuObjArray[0][objIndex].filters)
menuObjArray[0][objIndex].filters.alpha.opacity = 0;
else
menuObjArray[0][objIndex].style.opacity = 0;
}
menuObjArray[7][objIndex].className = menuObjArray[7]
[objIndex].className+�Over�;
menuObjArray[4][objIndex] = 0;
menuObjArray[0][objIndex].style.height = 0 + �px�;
clearInterval(menuObjArray[5][objIndex]);
menuObjArray[5][objIndex] = null;
menuObjArray[6][objIndex] = false;
isLocked = false;
UpdateUserCookie(objIndex);
return 0;
}
return 0;
}
if (!menuObjArray[6][objIndex]) {
if(doFading) {
if(menuObjArray[0][objIndex].filters)
menuObjArray[0][objIndex].filters.alpha.opacity += 100/
( ( (menuObjArray[2][i] * divHeight) / moveSlidePix) +1);
else {
opcVal = parseFloat(menuObjArray[0][objIndex].style.opacity);
opcVal += .9/((menuObjArray[2][i] * divHeight) / moveSlidePix);
menuObjArray[0][objIndex].style.opacity = opcVal;
}
}
menuObjArray[4][objIndex] += moveSlidePix;
if (menuObjArray[4][objIndex] < (menuObjArray[2][objIndex] * divHeight))
menuObjArray[0][objIndex].style.height = menuObjArray[4][i] + �px�;
else {
if(doFading) {
if(menuObjArray[0][objIndex].filters)
menuObjArray[0][objIndex].filters.alpha.opacity = 100;
else
menuObjArray[0][objIndex].style.opacity = 1;
}
strClassName = String(menuObjArray[7][objIndex].className);
menuObjArray[7][objIndex].className =
strClassName.substring(0,strClassName.length � 4);
 menuObjArray[4][objIndex] = (menuObjArray[2][objIndex] * divHeight);
menuObjArray[0][objIndex].style.height = (menuObjArray[2][objIndex] *
divHeight)+ �px�;
menuObjArray[1][objIndex].style.display = �inline�;
clearInterval(menuObjArray[5][objIndex]);
menuObjArray[5][objIndex] = null;
menuObjArray[6][objIndex] = true;
isLocked = false;
UpdateUserCookie(objIndex);
return 0;
}
return 0;
}
}

function ChangeStyle() {
className = String(this.className);
if (className.substring(className.length � 4, className.length) == �Over�)
this.className = className.substring(0,className.length � 4);
else
this.className = this.className + �Over�;
}

<!� Paste this code into the BODY section of your HTML document �>

<div style=�float:left;width:140px;height:500px;margin-right:10px;� >

<!� *********************************Start Menu****************************** �>
<div class=�mainDiv�>
<div class=�topItem1?>Demo Menu 1</div>
<div class=�dropMenu1?>
<div class=�subMenu1? style=�display:inline;�>
<span class=�subItem1?><a href=�#�>Sub Menu 1</a></span><br>
<span class=�subItem1?><a href=�#�>Sub Menu 2</a></span><br>
<span class=�subItem1?><a href=�#�>Sub Menu 3</a></span><br>
<span class=�subItem1?><a href=�#�>Sub Menu 4</a></span><br>
<span class=�subItem1?><a href=�#�>Sub Menu 5</a></span><br>
</div>
</div>
</div>
<!� *********************************End Menu****************************** �>
<br>
<!� *********************************Start Menu****************************** �>
<div class=�mainDiv�>
<div class=�topItem�>Demo Menu 2</div>
<div class=�dropMenu� style=�height:0px;filter:alpha(opacity=0);opacity:0?>
<div class=�subMenu� style=�display:none;�>
<span class=�subItem�><a href=�#�>Sub Menu 1</a></span><br>
<span class=�subItem�><a href=�#�>Sub Menu 2</a></span><br>
<span class=�subItem�><a href=�#�>Sub Menu 3</a></span><br>
<span class=�subItem�><a href=�#�>Sub Menu 4</a></span><br>
</div>
</div>
</div>
<!� *********************************End Menu****************************** �>
<br>
<!� *********************************Start Menu****************************** �>
<div class=�mainDiv�>
<div class=�topItem2?>Demo Menu 3</div>
<div class=�dropMenu2?style=��>
<div class=�subMenu2? style=�display:inline;�>
<span class=�subItem2?><a href=�#�>Sub Menu 1</a></span><br>
<span class=�subItem2?><a href=�#�>Sub Menu 2</a></span><br>
<span class=�subItem2?><a href=�#�>Sub Menu 3</a></span><br>
<span class=�subItem2?><a href=�#�>Sub Menu 4</a></span><br>
</div>
</div>
</div>
<script type=�text/javascript� src=�xpMenu.js�></script>
<!� *********************************End Menu****************************** �>
</div>
<p><div align=�center�>
<font face=�arial, helvetica� size�-2?>Free JavaScripts provided<br>
by <a href=�https://javascriptsource.com�>The JavaScript Source</a></font>
</div><p>