posting 2 java scripts on one page

I have a page: http://www.sunelectricsystems.com/Commercial/com-ground-mounted.htm
http://www.sunelectricsystems.com/style1.css
http://www.sunelectricsystems.com/drop_down.js

Obviously having 2 #nav ID's is invalid code. I am trying to find a way to have two drop downs on the same page. One for the top menu, and one for the bottom menu.

I have tried to change the getElementById to getElementByClass, and the corresponding nav variable in the style sheet. This works for FireFox and IE 7, but not IE 6

The next solution I thought of was to make 2 java scripts and ID's, one for each menu (e.g.: #nav for drop_down, and #nav-again for drop_down2). Problem is, I don't know how to tell the page to run both drop_down.js and drop_down2.js on the same page. I have tried a bunch of ways to tell it to run both scripts, with no luck.

This:
<script type="text/javascript" src="../drop_down.js"></script>
<script type="text/javascript" src="../drop_down2.js"></script>

Allows only the top script to run.

Is there a way I can tell IE 6 to run either drop_down or drop_down2, depending on the variable?

Or is there a way I can get IE 6.0 to accept getElementByClass?

I'm not really sure what you are trying to do, but it sounds like conditional comments (http://www.quirksmode.org/css/condcom.html) would help here...

You generally shouldn't rely on JS to detect the browser type...

Try this
// JavaScript Document
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementsByTagName('ul');
for(j=0;j<navRoot.length;j++)
{
if(navRoot[j].className == 'nav')
{
for (i=0; i<navRoot[j].childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
}
}
window.onload=startList;
Be sure to get rid of the ids and give them classes of nav and make sure to change your CSS as well to match the classes.

The work around code works great in IE 7 and Firefox, but not in IE 6.0. Nothing drops in IE 6 when there are 2 menus on the page, but the new code works in IE 6.0 when there is only 1 menu.

I am sorry, I am just not good at fixing java.

I do have conditional comments for a different IE 7.0 bug and the Holly Hack for IE 6 peekaboo bug.

Thanks

Chump2877,

I have some conditional comments to fix IE 6 and IE 7 bugs, but I can't get the drop down menu's to run together in IE 6 at all. The conditional comment will only work if I can figure out how to either get 2 scripts to run at the same time, or get IE 6 to accept nav as a class. Neighter of which I have been successful at figuring out so far.

Siggh.

Thanks

Sorry forgot one part. Try this
// JavaScript Document
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementsByTagName('ul');
for(j=0;j<navRoot.length;j++)
{
if(navRoot[j].className == 'nav')
{
for (i=0; i<navRoot[j].childNodes.length; i++)
{
node = navRoot[j].childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
}
}
window.onload=startList;
Also java is NOT javascript. They are two totally different languages.

Thank you so much for the addition of that letter [j]. It all works now and I am off to the library to get a JavaScript for dummies book.