BigAl75 Posted March 29, 2007 Share Posted March 29, 2007 I'm trying to create a hover menu in javascript for the website of the company I work for. I have a working version written strictly in CSS, but our reports show almost 70% of our visitors are still using IE 6.0 which doesn't support the navigation menu we have in CSS. We are redirecting them to a sub-directory, and need the javascript menu so that they can navigate the site. I almost have it completely working, but there is one section (products) that has three levels. This section isn't working properly. I was wondering if someone could take a look at it and let me know what I'm doing wrong with it.Here's the javascript code: <script type="text/javascript"><!--window.onload=montre;function montre(id) {var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} }if (d) {d.style.display='block';}}//--></script> The CSS: dl, dt, dd, ul, ol, li { margin: 0; padding: 0; list-style-type: none;}#menu { position: relative; width: 135px;}#menu dl { float: left; width: 135px; position: static; font: 12px/20px Arial, Helvetica, sans-serif; text-align: left; list-style-type: none;}#menu dt { text-align: left; background: #0033CC; border: 1px solid black; list-style-type: none; text-indent: 3px;}#menu dt a { width: 133px; font: 12px/20px Arial, Helvetica, sans-serif; color: white; text-decoration: none; list-style-type: none;}#menu dt a:hover { background: #99CCFF; color: black; text-decoration: none; display: block; list-style-type: none;}menu dd { border: 1px solid black; list-style-type: none; text-align: left; font: 12px/20px Arial, Helvetica, sans-serif; padding: 0px 0px 0px 3px;}#menu ul { position: absolute; left: 125px; width: 135px; margin-top: -22px;}#menu ol { position: absolute; left: 125px; height: -22px; width: 135px; padding: 0px; margin: 0px; display: block;}#menu li { background: #0033CC; width: 130px; border: 1px solid #000; list-style-type: none; margin: 0px; text-align: left; font: 12px/20px Arial, Helvetica, sans-serif; text-indent: 3px;}#menu li a { width: 130px; font: 12px/20px Arial, Helvetica, sans-serif; color: white; text-decoration: none; text-align: left; list-style-type: none; text-indent: 3px;}#menu li a:hover { background: #99CCFF; color: black; text-decoration: none; display: block; list-style-type: none; width: 130px; padding: 0px;} And the html: <dl id="menu"> <dt onmouseover="java script:montre('smenu1');"><a href="index.html">Home</a></dt> <dd id="smenu1" onmouseover="java script:montre('smenu1');" onmouseout="java script:montre();"> <ul> <li><a href="index.html">Porous Materials, Inc. Home</a></li> <li><a href="http://www.app.bz">Applied Pressure Products Home</a></li> </ul> </dd> <dt onmouseover="java script:montre('smenu2');" onmouseout="java script:montre();"><a href="company/index.html">About Us</a></dt> <dd id="smenu2" onmouseover="java script:montre('smenu2');" onmouseout="java script:montre();"> <ul> <li><a href="company/index.html">About PMI</a></li> <li><a href="employment/index.html">Employment</a></li> </ul> </dd> <dt onmouseover="java script:montre('smenu3');" onmouseout="java script:montre();"><a href="products/index.html">Products</a></dt> <dd id="smenu3" onmouseover="java script:montre('smenu3');"> <ul> <li onmouseover="java script:montre('smenu4');" onmouseout="java script:montre('smenu4');"><a href="products/index.html">PMI Products</a></li> <ol id="smenu4"> <li><a href="products/porometers.html">Porometers</a></li> <li><a href="products/permeameters.html">Permeameters</a></li> <li><a href="products/porosimeters.html">Porosimeters</a></li> <li><a href="products/bet_sorptometers.html">BET/Sorptometers</a></li> <li><a href="products/pycnometers.html">Pycnometers</a></li> </ol> <li><a href="products/pore_size.html">Pore Size</a></li> <li><a href="products/pore_volume.html">Pore Volume</a></li> <li><a href="products/permeability.html">Permeability</a></li> <li><a href="products/density.html">Density</a></li> <li><a href="products/surface_area.html">Surface Area</a></li> <li><a href="products/adsorption.html">Adsorption</a></li> </ul> </dd> <dt onmouseover="java script:montre('smenu5');" onmouseout="java script:montre();"><a href="testing/index.html">Testing Services</a></dt> <dd id="smenu5" onmouseover="java script:montre('smenu5');" onmouseout="java script:montre();"> <ul> <li><a href="testing/index.html">PMI Testing Services</a></li> <li><a href="testing/docs/testing_price_list_4_12_05.pdf" target="_blank">Testing Price List</a></li> <li><a href="testing/docs/testing_request_form_4_12_05.pdf" target="_blank">Testing Request Form</a></li> </ul> </dd></dl> Thanks for the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now