Need JavaScript code to suit the two lots of css code - horizontal and vertical

[cturner01]

After realizing that htc files only work with Internet Explorer, I have needed to have JavaScript code to suit the two lots of css code below. Please help, I need the code pretty urgently. The code must work with most versions of browsers.

The horizontal css code is here:

#mainMenu {
	list-style:none;
	position:relative; 
	z-index:10;
	float:left;
	width:100%;
	/* fixed px height background == px fonts */
	font:normal 14px/16px arial,helvetica,sans-serif;
	background:url(images/roundedBorders.png) 0 0 no-repeat;
}
 
#mainMenu li {
	position:relative;
	float:left;
	/*white-space:nowrap;*/
}
 
#mainMenu li a {
	float:left;
	padding:8px;
	margin-left:12px;
	text-decoration:none;
	color:#FFF;
	background:#39E url(images/roundedBorders.png) -12px 0 no-repeat;
}
 
#mainMenu li:hover a {
	background-color:#13E;
	background-position:-910px 0;
}
 
#mainMenu li ul {
	list-style:none;
	position:absolute;
	display:inline; /* fix IE 'sticking' */
	top:32px;
	left:-999em;
	width:216px;
}
 
#mainMenu li:hover ul {
	display:block; /* fix IE 'sticking' */
	left:0;
}
 
#mainMenu li:hover li {
	width:216px;
}
 
#mainMenu li:hover li a {
	float:none !important;
	display:block;
	zoom:1;
	position:relative; /* make IE let you click whole thing */
	background:#3A9CEE;
}
 
#mainMenu li li a:hover {
	background:#0A2DE6;
}

The vertical css code is here:

#sideMenu {
	z-index: 10;
	float:left;
	width:232px;
	padding:2px 0;
	list-style:none;
	/* image interaction == px fonts */
	font:normal 14px/16px arial,helvetica,sans-serif;
	background:#0b2ae7;
}
 
#sideMenu li {
	position:relative;
	float:left;
	display:inline; /* prevent IE margin doubling */
	width:216px;
	margin-left:8px;
}
 
#sideMenu li li {
	margin:0;
}
 
#sideMenu a {
	display:block;
	padding:27px 8px;
	text-decoration:none;
	color:#FFF;
	background:#05C url('images/btnup.gif');
}
 
#sideMenu ul li a:hover {
	display: block;
	background: #1333E7 url('images/btndown.gif');
}
 
#sideMenu li ul {
	z-index:10;
	list-style:none;
	position:absolute;
	display:inline; /* prevent IE 'sticking */
	top:0;
	left:-999em;
	background:#0b2ae7; /* 35F */
	/*white-space:nowrap;*/
}
 
#sideMenu li:hover ul {
	left:216px;	
}
 
#sideMenu li:hover li a {
	padding:8px;
}
 
#sideMenu li ul a:hover { /* li li:hover a */
	background:#0b2ae7;
}

[cturner01]

Someone please help - this is urgent.