Vertical Menu Help

[prettejohn]

Hi folks

I'm the teacher at Bodmin College responsible for the school website. We've recently upgraded some machines to IE8 which has meant that we've had problems with our vertical menu. I've rewritten the menu using the CSS Vertical Menu . It works in IE8 now but there is a real problem now in IE7 [sigh].

The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. Can anyone help a scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.

Thank you very much and you'll make a lot of teachers and students happy!

Chris

[Deacon Frost]

Originally Posted by prettejohn

Hi folks

I'm the teacher at Bodmin College responsible for the school website. We've recently upgraded some machines to IE8 which has meant that we've had problems with our vertical menu. I've rewritten the menu using the CSS Vertical Menu . It works in IE8 now but there is a real problem now in IE7 [sigh].

The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. Can anyone help a scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.

Thank you very much and you'll make a lot of teachers and students happy!

Chris

The display problem is in FX as well.

A tip would be to post your code for both the javascript, and the css.

It would seem to be a css issue, but there may very well be a js error.

[prettejohn]

Thanks for the tip DeaconFrost.

The code is for the Java Script:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-50 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
		spanref.className="arrowdiv"
		spanref.innerHTML="&nbsp;&nbsp;"
		ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}


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

The Code for the css is:

.glossymenu, .glossymenu li ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100px; /*WIDTH OF MAIN MENU ITEMS*/

}

.glossymenu li{
position: relative;
}

.glossymenu li a{
	background: white url(glossyback.gif) repeat-x bottom left;
	font: Arial, Helvetica, sans-serif, #74A8F5;
	color: white;
	display: block;
	width: auto;
	padding: 0px 0;
	padding-left: 10px;
	text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 100px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
	width: 120px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
	padding-left: 100px;
	height: 15px;
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

Thank you!