need help to my css horizontal menu with javascript for IE

[vik85]

hi everybody i am new in javascript .i hope all guys helpful.i have my site tonerquestsite.com.my javascript is not working for IE can you help me out .my css file is

/* -------------- layout ------------------ */

/*qmfv{visibility:hidden !important;}*/
qmfh{visibility:visible !important;}

.leftNav {position: relative; z-index: 0;}
/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc1 .qmdivider
{
	display:block;
	font-size:1px;
	border-width:0px;
	border-style:solid;
	position:relative;

}
.qmmc1 .qmdividery
{
	float:left;
	width:0px;
}
.qmmc1 .qmtitle
{
	display:block;
	cursor:default;
	white-space:nowrap;
	position:relative;
}
.qmclear
{
	font-size:1px;
	height:0px;
	width:0px;
	clear:left;
	line-height:0px;
	display:block;
	float:none !important;
}
.qmmc1 
{
	position:relative;
	zoom:1;
	z-index:10;
}
.qmmc1 a, .qmmc1 li 
{
	float:left;
	display:block;
	white-space:nowrap;
	position:relative;
	z-index:1;
}
.qmmc1 div a, .qmmc1 ul a, .qmmc1 ul li 
{
	float:none;
}
.qmsh div a {float:left;}
.qmmc1 div
{
	visibility:hidden;
	position:absolute;
}
.qmmc1 .qmcbox
{
	cursor:default;
	display:block;
	position:relative;
	z-index:1;
}
.qmmc1 .qmcbox a{display:inline;}
.qmmc1 .qmcbox div
{
	float:none;
	position:static;
	visibility:inherit;
	left:auto;
}
.qmmc1 li {position:relative;z-index:1;}
.qmmc1 ul 
{
	left:-10000px;
	position:absolute;
	z-index:10;
}
.qmmc1, .qmmc1 ul 
{
	list-style:none;
	padding:0px;
	margin:0px;
}
.qmmc1 li a {float:none;}
.qmmc1 li:hover>ul{left:auto;}
.qmmc1 li:hover ul, li.over ul{display:block;} 

/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/
#qm1clear
{
	clear:left;
}


	/* QuickMenu 0 */

	/*"""""""" (MAIN) Container""""""""*/	
	#qm1	
	{
	width:900px;
	height:auto;
	text-align:center;
	}


	/*"""""""" (MAIN) Items""""""""*/	
	#qm1 a	
	{
	background-color:transparent;
	color:#333333;
	font-family:Arial;
	font-size:2px;
	text-align:left;
	text-decoration:none;
	border-width:0px 0px 0px 1px;
	border-style:solid;
	border-color:#699EDC;
	padding-left: 1.5em;
	padding-right: 1em;
	}


	/*"""""""" (MAIN) Hover State""""""""*/	
	#qm1 a:hover	
	{
	background-color: #699EDC;
	}


	/*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/	
	#qm1 li:hover	
	{
	text-decoration:none;
	}


	/*"""""""" (MAIN) Parent Hover State""""""""*/	
	#qm1 .qmparent1:hover	
	{	
		background-color:#699EDC;
		margin:0px;
		display:block;
		position:relative;
		z-index:1;
		overflow:visible;
	}


	/*"""""""" (MAIN) Active State""""""""*/	
	body #qm1 .qmactive, body #qm1 .qmactive:hover	
	{
	background-color:#699EDC;
	text-decoration:underline;
	}


	/*"""""""" (SUB) Container""""""""*/	
	#qm1 div, #qm1 ul	
	{
	background-color:#699EDC;
	width:inherit;
	border-width:1px;
	font-size:10px;
	visibility:visible;
	line-height:1.5;
	padding: 3px 1px 3px 1px;
	z-index:1;
	}


	/*"""""""" (SUB) Items""""""""*/	
	#qm1 div a, #qm1 ul a	
	{	
		/*padding:1px 20px 1px 2px;*/
		background-color:transparent;
		color:#333333;
		font-size:smaller;
		border-width:1px 0px 1px 0px;
		border-style:solid;
		border-color:#699EDC;
		
		
	}


	/*"""""""" (SUB) Hover State""""""""*/	
	#qm1 div a:hover	
	{	
		text-decoration:underline;
	}


	/*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/	
	#qm1 ul li:hover>a	
	{	
		text-decoration:underline;
		margin-bottom:auto;
	}


	/*"""""""" (SUB) Parent Hover State""""""""*/	
	#qm1 div .qmparent1:hover	
	{	
		background-color:transparent;
	}


	/*"""""""" (SUB) Active State""""""""*/	
	body #qm1 div .qmactive, body #qm1 div .qmactive:hover	
	{	
		background-color:#D6D6D6;
		text-decoration:none;
		border-color:#858585;
	}


	/*"""""""" Individual Titles""""""""*/	
	#qm1 .qmtitle	
	{
	cursor:default;
	padding:3px 0px 3px 4px;
	color:#333333;
	font-family:arial;
	font-size:9px;
	font-weight:bold;
	margin-bottom: 1px;		
		
	}


	/*"""""""" Individual Horizontal Dividers""""""""*/	
	#qm1 .qmdividerx	
	{	
		border-top-width:1px;
		border-color:#BFBFBF;

	}


	/*"""""""" Individual Vertical Dividers""""""""*/	
	#qm1 .qmdividery	
	{	
		border-left-width:1px;
		height:5px;
		margin:4px 2px 0px 2px;
		border-color:#BFBFBF;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm1 .qmparent1	
	{	
		background-image:url(qmimages/cssalt1_arrow_right.gif);
		background-repeat:no-repeat;
		background-position:95% 50%;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm1 ul .qmparent1
	{	
		background-image:url(qmimages/cssalt1_arrow_right.gif);
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm1 ul	
	{	
		margin:0px 0px 0px -1px;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm1 ul li:hover > a.qmparent1	
	{	
		background-color:#D6D6D6;
		background-image:url(qmimages/cssalt1_arrow_right_hover.gif);
		text-decoration:none;
		border-color:#858585;
		margin:auto;
		
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm1 li:hover > a.qmparent1	
	{	
		background-color:#699EDC;
		background-image:url(qmimages/cssalt1_arrow_right_hover.gif);
	}
#horizNav ul li {z-index:1;}
#horiNav ul ul ul
{
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

and my javascript is <script type="text/javascript">

startList = function() 
{
	if (document.all&&document.getElementById) 
	{
		navRoot = document.getElementById("qm1");
		
		for (i=0; i<navRoot.childNodes.length; i++)
		{
			node = navRoot.childNodes[i];			
			alert(node);
			if (node.nodeName=="LI") 
			{
				node.onmouseover=function()
				{
					this.className+=" over";
				}
				node.onmouseout=function()
				{
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

</script>

thanks a lot for help.its really urgent .please guys give me favor.i am waiting for reply.

[essential]

Here's a simple document sample, which you can incorporate inside your page:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
.over {
   padding : .200em 1em .200em 1em;
   border : 1px solid #000;
   background-color : #00FF00;
   color : #FFF; }
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var myEvent;
var testfun = function( e ) {
   if ((( e.type.toLowerCase === "mouseover" ) || "onmouseover" ) && this.className !== "over" ) {
   this.className = "over";
   return true;
   } this.className = "";
}; var startList = function() {
   var node = (( "getElementById" in document ) ? document.getElementById("main") : document.all.main );
   if ( "childNodes" in node ) {
      for ( var x = 0; x < node.childNodes.length; x++ ) {
         if ((( node.childNodes[ x ].nodeType === Node.ELEMENT_NODE ) || 1 )) {
         var o = node.childNodes;
         (( "addEventListener" in document ) ? o[ x ].addEventListener( "mouseover", testfun, false ) : (( "attachEvent" in document ) ? o[ x ].attachEvent( "onmouseover", testfun ) : document.onmouseover = testfun ));
         (( "addEventListener" in document ) ? o[ x ].addEventListener( "mouseout", testfun, false ) : (( "attachEvent" in document ) ? o[ x ].attachEvent( "onmouseout", testfun ) : document.onmouseout = testfun ));
         continue;
         }
      } return true;
   } alert("This features in not supported on this browser");
}; window.onload = startList;
// ]]>
</script>
</head>
<body>
<div id="main">
<p>Paragraph #1</p>
<p>Paragraph #2</p>
<p>Paragraph #3</p>
</div>
</body>
</html>

[vik85]

hey this code give me lots of error .and it cant run in firefox.it mess up everything of what i did.
please give me gud solution .if you need any further info. thn let me know i will forward to you.

[essential]

Is that so!? But the whole thing is working perfectly under OPERA. Try to run the whole document 1st before you apply further modification, so that you would know what you are missing. Can i see your code that you've currently converted into above format?

[essential]

Here's another workaround:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
.over {
   padding : .200em 1em .200em 1em;
   border : 1px solid #000;
   background-color : #00FF00;
   color : #FFF; }
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var startList = function() {
var li;

   try {
   li = (( document.getElementstByTagName ) ? document.getElementsByTagName("ul")["qm"].getElementsByTagName("li") : document.all.tags("ul").item("qm").all.tags("li")); 
   } catch( e ) {
   li = (( document.getElementById ) ? document.getElementById("qm").children : (( document.all ) ? document.all.qm.children : undefined ));
   } if ( typeof li !== "undefined" ) {
      try { 
      for ( var x = 0, y = 0; x < li.length; x++, y++ ) {
      li[ x ].onmouseover = function() {
            if ( this.className !== "over" ) {
            this.className = "over";
            } return;
         };
      li[ y ].onmouseout = function() {
            if ( this.className === "over" ) {
            this.className = this.className.replace(/over/ig, "" );
            }
         };
      }
      } catch( er ) {
      alert( "Your browser is too old to handle this function!\nThrow it!!!" )
      }
   }
};

window.onload = startList;
// ]]>
</script>
</head>
<body>
<div id="main">
<ul id="qm">
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
</ul>
</div>
</body>
</html>

[vik85]

hey now is over but its not displaying my drop down menu .still its come out.
you can see it i put your code .

[essential]

Don't you know how to say please!? If the whole script does not work, then the problem is with you.

Altering those lines without knowing what you are exactly doing, will cause the entire script to break.

Maybe you should wait for someone else's, answer...

Im off this thread!