Link: http://buyruckus.com/HomePage.aspx The "ZoneFlex Products" submenu items are appearing under the other area. The submenu items have a z-index of 99, while the other area only has a z-index of 1. Can you please help me fix the issue?? It mostly only doesn't work in IE or Safari. Maybe its not a z-index issue, but if you know any solutions.. Thanks, -Salty
Make sure you have the top level item of the menu with the z-index, as the menu has to have the same z-index as the sub menu.
I did. Here are the codes: Left Side: <head> <style type="text/css"> #SideMenu { z-index: 99; margin-left: -10px; margin-top: -25px; position: absolute; } #Left_Nav_Head { background-image: url('http://akuwa.com/Portals/12/Graphics12/Left_Nav_Head.png'); background-repeat: repeat-x; width: 202px; height: 32px; font-family: Arial, Helvetica, sans-serif; color: #EFEFEF; font-size: 14px; font-weight: bold; text-indent: 10px; line-height: 32px; z-index: 99; } #menu, #menu ul, #menu li { padding:0; margin:0; z-index: 99; } #menu li { border: 1px solid #CFCFCF; list-style: none; position: relative; width: 200px; height: 25px; background-image: url('http://akuwa.com/Portals/12/Graphics12/Left_Nav_Head_Sub.png'); background-repeat: repeat-x; line-height: 25px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 12px; font-weight: bold; text-indent: 10px; z-index: 99; } #menu li a { text-decoration:none; color: #000000; display: block; z-index: 99; } #menu li:hover { background-color: #BFBFBF; color: #FF9900; background-image: url('http://akuwa.com/Portals/12/Graphics12/Left_Nav_Head_SubR.png'); background-repeat: repeat-x; z-index: 99; } #menu li a:hover { text-decoration:none; color: #FF9900; background-image: url('http://akuwa.com/Portals/12/Graphics12/Left_Nav_Head_SubR.png'); background-repeat: repeat-x; z-index: 99; } #menu ul ul { position: absolute; top:0; left:201px; visibility:hidden; z-index: 99; } #menu ul li:hover ul { visibility:visible; z-index: 99; } #menu .subfolderstyle{background:url(http://akuwa.com/Portals/12/Graphics12/arrow.png) no-repeat center right; margin-right: 4px; z-index: 99;} #menu .subfolderstyle:hover{background:url(http://akuwa.com/Portals/12/Graphics12/arrow.png) no-repeat center right; margin-right: 4px; z-index: 99;} </style> <script type="text/javascript"> var menuids=["MenuItems"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" } } } if (window.addEventListener) window.addEventListener("load", buildsubmenus, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus) </script> </head> <div id="SideMenu"> <div id="Left_Nav_Head"> ZoneFlex Products </div> <div id="menu"> <ul id="MenuItems"> <li><a href="#nogo">ZoneDirector</a> <ul> <li><a href="#nogo">ZoneDirector 1100</a></li> <li><a href="#nogo">ZoneDirector 3000</a></li> </ul> <li><a href="#nogo">ZoneSwitch</a> <ul> <li><a href="#nogo">ZoneSwitch 4000 Series</a></li> </ul> </li> <li><a href="#nogo">ZoneFlex Indoor</a> <ul> <li><a href="#nogo">ZoneFlex 7341</a></li> <li><a href="#nogo">ZoneFlex 7343</a></li> <li><a href="#nogo">ZoneFlex 7363</a></li> <li><a href="#nogo">ZoneFlex 7962</a></li> <li><a href="#nogo">ZoneFlex 2942</a></li> </ul> </li> <li><a href="#nogo">ZoneFlex Outdoor</a> <ul> <li><a href="#nogo">ZoneFlex 7762</a></li> <li><a href="#nogo">ZoneFlex 7731</a></li> <li><a href="#nogo">ZoneFlex 2741</a></li> </ul> </li> <li><a href="#nogo">MediaFlex CPE</a> <ul> <li><a href="#nogo">MediaFlex 7200 Series</a></li> <li><a href="#nogo">MediaFlex 7000 Series</a></li> <li><a href="#nogo">MediaFlex 2800 Series</a></li> <li><a href="#nogo">MediaFlex 2200 Series</a></li> </ul> </li> <li><a href="#nogo">FlexMaster</a></li> <li><a href="#nogo">Antennas</a></li> </ul> </div> </div> Code (markup): Right Side: <head> <meta content="en-us" http-equiv="Content-Language"> <style type="text/css"> #FeaturedProduct { margin-top: -25px; z-index: 1;} } .auto-style1 { font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #FF9900; } .auto-style2 { color: #FF9900; } .auto-style3 { text-decoration: none; } .auto-style4 { font-family: Arial, Helvetica, sans-serif; font-size: medium; } .auto-style5 { border-width: 0px; margin-top: 4px; } .auto-style6 { font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #CC0000; text-decoration: line-through; } .auto-style7 { font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #009900; } #FeaturedHead { background-image: url('http://akuwa.com/Portals/12/Graphics12/FeaturedHead.png'); background-repeat: no-repeat; line-height: 32px; height: 32px; width: 690px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #EFEFEF; margin-right: -10px; text-indent: 25px; z-index: 1; } img { z-index: 1; } </style> </head> <div id="FeaturedProduct"> <div id="FeaturedHead">Featured Product</div> <table style="width: 100%"> <tr> <td style="width: 275px"> <img alt="" height="90" src="http://akuwa.com/Portals/12/Graphics12/zonedirector3000.jpg" width="250"></td> <td> <h1 class="auto-style1"> <a class="auto-style3" href="/products-t343/ruckus-zonedirector-3000.aspx"> <span class="auto-style2">Ruckus ZoneDirector 3000</span></a></h1> <p class="auto-style4"> <span class="auto-style5">Enterprise-Class Smart Wireless LAN Controller. <a href="/products-t343/ruckus-zonedirector-3000.aspx"> <img alt="" class="auto-style5" height="25" src="http://akuwa.com/Portals/12/Graphics12/ReadMore.png" width="70"></a></span></p> <p class="auto-style6">Listed MSRP: $6,000</p> <p class="auto-style7">Our Price: Now Only $4,800!</p> </td> </tr> </table></div> Code (markup):