css/js drop down menu trouble

[Zargon]

the menu is droppiong down fine, but one of the menus had about 6 levels(I didnt do it, I'm just un-java'ing it so its easier to update/maintain) and it runs off the edge of the screen

any thoughts on how to force it to go left instead of right when near the screen edge?

 

[PhatoseAlpha]

Without seeing what you're actually using, it would be very hard to recommend a solution. There are pure CSS solutions for dropdown menus, and that's much harder to fix then javascript - though, it's likely to be tricky even using a pure JS solution.

 

[Zargon]

script type="text/javascript">

activateMenu = function(nav) 
{

	function hide(){

	this.lastChild.style.display="none";
	}


/* currentStyle restricts the Javascript to IE only */
	if (document.all &&
 document.getElementById(nav).currentStyle) 
{  
	var navroot = document.getElementById(nav);
        
        /* Get all the list items within the menu */

        var lis=navroot.getElementsByTagName("LI");  
        
	for (i=0; i<lis.length; i++) 
	{
               	/* If the LI has another menu level */
        	if(lis[i].lastChild.tagName=="UL")
		{
            
                	/* assign the function to the LI */
             		lis[i].onmouseover=function() 
			{	
                
                		/* display the inner menu */
                		this.lastChild.style.display="block";
                	}
                
			lis[i].onmouseout=function() 
			{   
                   		this.lastChild.style.display="none";
                	}
            	}
        }
}
}
window.onload= function(){
    /* pass the function the id of the top level UL */

    /* remove one, when only using one menu */
    activateMenu("nav"); 
    activateMenu("vertnav"); 
}

</script>

thats the JS

and here is the CSS

#nav{list-style: none;} 

#nav ul { 
     padding: 0;
     margin:0;
     list-style: none;
     width:12em;
     position:relative;
     overflow:visible; 
     font-weight: bold;
     text-align: center;
} 

#nav li { 
     margin:0; 
     position: relative; 
     float:left; 
     width: 12em;
     background-color:#99ccff;
     border:solid 1px #ffffff; 
     display:block;
     height:auto;
     font-weight: bold;
     text-align: center;
} 

 
#nav ul li{ border-width:1px 1px 0 0px;} 

#nav ul ul li{ border-width:1px 1px 0 0px;} 

#nav ul ul li:last-child{border-bottom:1px solid #ffffff, margin-right:6em;} 

#nav a { 
     text-decoration:none; 
     display:block;
     padding: 0.1em; 
     margin:0.2em 0 0.2em 0.1em; 
     width:11.5em; 
     height:1em;
     color:#000066;
} 

#nav a:hover, 
#nav li:hover{ 
     background-color:#0099cc; 
} 
#nav ul li:hover, 
#nav ul li a:hover{ 
     background-color:#0099cc; 
} 

#nav ul{ 
     display:none; 
} 

/*all see this */
#nav ul ul{ 
     display:none; 
     position:absolute; 
     margin-top:-1.8em; 
     margin-left:6em; 
     z-index:100;
} 

/* non-IE browsers see this */ 
#nav ul li>ul, #nav ul ul li>ul{ 
     margin-top:-1.4em; 
} 

#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul, 
#nav li:hover ul ul ul ul ul{ 
     display:none; 
} 

#nav li:hover ul, 
#nav ul li:hover ul, 
#nav ul ul li:hover ul, 
#nav ul ul ul li:hover ul, 
#nav ul ul ul ul li:hover ul{ 
     display:block; 
} 

li>ul { 
     top: auto; 
     left: auto; 
} 

#holdm{
	position:absolute; 
	z-index:100; 
	width:100%;
}

all machines access this site(an internal website) are on IE7

I have low hopes for being able to post it and getit fixed but Im frustrated so I figure its worth a shot

the pure CSS menus really dont seem to work with IE7 even though they *should*

 

[linkgoron]

#nav{list-style: none;} 

#nav ul { 
     padding: 0;
     margin:0;
     list-style: none;
     width:12em;
     position:relative;
     overflow:visible; 
     font-weight: bold;
     text-align: center;
} 

#nav li { 
     margin:0; 
     position: relative; 
     float:left; 
     width: 12em;
     background-color:#99ccff;
     border:solid 1px #ffffff; 
     display:block;
     height:auto;
     font-weight: bold;
     text-align: center;
} 

 
#nav ul li{ border-width:1px 1px 0 0px;} 

#nav ul ul li:last-child{border-bottom:1px solid #ffffff, margin-right:6em;} 

#nav a { 
     text-decoration:none; 
     display:block;
     padding: 0.1em; 
     margin:0.2em 0 0.2em 0.1em; 
     width:11.5em; 
     height:1em;
     color:#000066;
} 

/* I think this line can also be removed */
#nav a:hover, 
/* ^^^ this can be remove I believe ^^^ */
#nav li:hover{ 
     background-color:#0099cc; 
} 

#nav ul{ 
     display:none; 
} 

/*all see this */
#nav ul ul{ 
     display:none; 
     position:absolute; 
     margin-top:-1.8em; 
     margin-left:6em; 
     z-index:100;
} 

/* non-IE browsers see this */ 
#nav li>ul{ 
     margin-top:-1.4em; 
} 

#nav li:hover > ul
{ 
     display:block; 
} 

li>ul { 
     top: auto; 
     left: auto; 
} 

#holdm{
	position:absolute; 
	z-index:100; 
	width:100%;
}

Your css looks kind of bloated.
I believe the changes I've made will keep it the same (unless something is wrong with IE 7?)
It is 2:45 AM so I might have made a mistake...
It won't fix your problem, I think the css is better.

EDIT:

Hmmm maybe you can add something like this:

#nav ul ul ul ul ul ul /* this is for 6 steps in... If you need less just remove ul's as needed */
{
   left: -50px; /*whatever value */
}

EDIT 2:
I've changed some more stuff... You can still make it better, but I believe this is supposed to work.