Originally, I thought this was simply a CSS problem, perhaps with z-index and other settings being bad. I've done some research and asked around another dev site I'm at and couldn't find a solution. Basically, the dropdown menu sits behind the content divs. The menu is partially JS powered (originally written by someone at DynamicDrive, but not recently updated). Here is the code: var menubgcolor='#000000' //menu bgcolor var disappeardelay=500 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="no" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all var vismenus = new Array(); var dropmenuobj; var delayhide; function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden){ if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function dropdownmenu(obj, e, menucontents){ hidemenu(); if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById(menucontents) : dropmenudiv if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden") } vismenus.push(dropmenuobj); return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ var len = vismenus.length; for (i = 0; i < len; i++) { dropmenuobj = vismenus.pop(); if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu Code (markup): The variables at the top don't really matter since style stuff is controlled by the CSS. If someone can help me out with this, I'd greatly appreciate it! thanks
If you are interested in a cross-browser AJAX solution, email me. Screen shot: www.javascript-demos.com/Test/HorizMenu.gif Fully customizable. Create / edit the menu by editing a simple .xml file like this one: <?xml version="1.0" ?> <menu> <main> <text>Home</text> <link>links/index.html</link> </main> <main> <text>Products</text> <sub> <text>Books</text> <link>links/books.html</link> </sub> <sub> <text>Music</text> <link>links/music.html</link> </sub> <sub> <text>Video</text> <link>links/video.html</link> </sub> </main> <main> <text>Terms</text> <sub> <text>Privacy Policy</text> <link>links/privacy.html</link> </sub> <sub> <text>Refunds & Exchanges</text> <link>links/refund.html</link> </sub> </main> <main> <text>Contact Us</text> <sub> <text>By Email</text> <link>links/contact_us.html</link> </sub> <sub> <text>Phone & Fax</text> <link>links/contact_info.html</link> </sub> </main> </menu> Code (markup):