glossy vertical menu

[bubbbbbz]

hi im bit of a newbe iv been using the glossy vertical menu and when you go to the 3rd level it is ontop of the second level. will i have to edit the java in order to make it move across

sorry about explanation the best way is to see the menu if you follow the arrows you will see what i mean thanks

www.justaskdino.com/test.php

here is the code for the java (if i increase ver submenuoffset=2) its the second level that moves along i would like the 3rd level..



var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //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"

[jscheuer1]

That's not Glossy Vertical Menu from Dynamic Drive:

http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/

which has no sub-menus. Rather it's CSS Vertical List Menu from Javascript Kit:

http://www.javascriptkit.com/script/script2/verticalmenu.shtml

You've altered both the markup and the css from that shown on its demo page. If you go back and make sure your markup and css conform as closely as possible to the demo, things will go better. For instance, you have far too many class="glossymenu" attributes. in the markup. That should occur only once on the ul that contains the menu. I found that by taking care of that and reverting to the demo css while still using your images, things got a lot better, but there was still a problem on the 2nd level of fly outs (drop downs).

As the demo page on Javascript Kit doesn't show any fly outs for this menu, perhaps they hadn't really worked that out. Or maybe there's something else about your page . . .

In any case, after fixing the bit about too many class="glossymenu" attributes as outlined above, and reverting to the default styles + your images, I found adding this rule:


.glossymenu li ul ul{ /* sub sub menu */
margin-left: 192px!important;
}

fixed those 2nd level fly outs. But the Javascript Kit menu appears to have other problems visa vis being cross browser, at least on the test page you linked to. You might want to consider Dynamic Drive's All Levels Navigational Menu (v3.0):

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

Another good things to do would be to clean up things. Validate the markup and get rid of any unused scripts or styles.