Javascript code not working fine in IE8.

[Gaurav Pruthi]

I have embedded a sidebar menu in the web page , Although it is working fine with Mozilla firefox , but in IE8 I am facing problem what is happening is :

- I am not able to select submenu item options in IE8( It disappears as
soon as I point cursor on it).
- When I select a menu item having a number of submenu items. then a
space is created between menuitems vertically which look awkward.

But when I tried on firefox8.0 , it is working fine.

Here is the code snippet of javascript :



<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"]; //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul");
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle";

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"; //dynamically position first

else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px";

//position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block";
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none";
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none"
ultags[t].style.visibility="visible";
ultags[t].style.display="none";
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false);
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu);

</script>



The corresponding menu items are :



<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Checklist>> </a>
<ul>
<li><a href="#">Create</a></li>
<li><a href="#">Verify</a></li>
<li><a href="#">Approve</a></li>
</ul>
</li>
<li><a href="#">Status of Review</a></li>

<li><a href="#">Generate Report</a></li>

</ul>

</div>


Will appreciate any help in this regard.

thanks.

[jscheuer1]

I think you mean:

http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

That works fine here in IE 8. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.