BigAl75

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.

The layout I had wasn't showing up correctly in any browser. I decided to not have a definitive width and just chane the body margins instead. Thanks for the help anyway.

There's supposed to be a fly-out menu that you won't see in IE 6.0 because it doesn't handle the CSS hover like IE 7.0, FF and Opera do.

From her shout box: Oh, I don't know, write better code, perhaps?I've used a lot of online editors in my day, from Homestead to Google and others, as well as FrontPage. One thing I always did was make it at least aesthetically pleasing. This site is horrible from the time you open it. My only hope (slim that it may be) is that it's some stay-at-home mom who's doing this for her friends. I can't believe this is someone who actually thinks they're doing something good.

OK, I think I get what jlhaslip is talking about with he 'id' thing, but as far as getting the LVAH in order, I guess it's just not clicking right now (half asleep).CSS: #navmenu { width: 135px; position: static; font: 12px Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px;}#navmenu a { width: 135px; height: auto; padding-left: 2px; border: 1px solid #000; background: #003366; line-height: 20px; font-size: 12px; color: White;}#navmenu ul { padding: 0px; margin: 0px;}#navmenu ul li { list-style-type: none;}#navmenu ul li a:visited { display: block; text-decoration: none; color: #EEEEEE;}#navmenu ul li a { display: block; text-decoration: none; color: #FFFFFF;}#navmenu ul li a:hover { background: Yellow; color: Black;}#navmenu li ul { display: none;} #navmenu li:hover > ul#a3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#b3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#c3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#d3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#e3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#f3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#g3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#a3a { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#a3b { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;} HTML: <div id="navmenu"> <div class="navhead">Navigation</div> <ul> <!-- Home Navigation --> <li><a href="index.html">Home</a></li> <!-- End Home Nav --> <!-- Begin About Us Nav --> <li><a href="#nogo">About Us</a> <ul id="a3"> <li><a href="about/index.html">About the Website</a></li> <li><a href="about/staff.html">About the Staff</a></li> </ul> </li> <!-- End About US Nav --> <!-- Begin Interact Nav --> <li><a href="#nogo">Interact With Us</a> <ul id="b3"> <li><a href="forums/">Forums</a></li> <li><a href="gallery/">Photo Gallery</a></li> </ul> </li> <!-- End Interact Nav --> <!-- Begin Attractions Nav --> <li><a href="attractions/index.html">Local Attractions</a> <ul id="c3"> <li><a href="attractions/automotive.html">Automotive</a></li> <li><a href="attractions/theater.html">Theater & Plays</a></li> <li><a href="attractions/food_beverage.html">Food & Beverages</a></li> </ul> </li> <!-- End Attractions Nav --> <!-- Begin Events Nav --> <li><a href="events/index.html">Events</a> <ul id="d3"> <li><a href="events/fund_raisers.html">Fund Raisers</a></li> <li><a href="events/community/index.html">Community Events</a> <ul id="a3a"> <li><a href="events/community/mara_maple.html">Marathon Maple Festival</a></li> </ul> </li> <li><a href="events/sports.html">Sports</a> <ul id="a3b"> <li><a href="events/sports/baseball.html">Baseball</a></li> <li><a href="events/sports/hockey.html">Hockey</a></li> <li><a href="events/sports/golf.html">Golf</a></li> <li><a href="events/sports/other.html">Other Sports</a></li> </ul> </li> </ul> </li> <!-- End Events Nav --> <!-- Begin Concerts Nav --> <li><a href="#nogo">Concerts & Gatherings</a> <ul id="e3"> <li><a href="shows/concerts.html">Concerts</a></li> <li><a href="shows/gatherings.html">Gatherings & Get Togethers</a></li> </ul> </li> <!-- End Concerts Nav --> <!-- Begin Music Nav --> <li><a href="localmusic/index.html">Local Music</a> <ul id="f3"> <li><a href="music/events.html">Music Events</a></li> <li><a href="music/rock.html">Rock/Metal</a></li> <li><a href="music/country.html">Country</a></li> <li><a href="music/classic.html">Classic Rock</a></li> <li><a href="music/other.html">Other Genres</a></li> </ul> </li> <!-- End Music Nav --> <!-- Begin Contact Us Nav --> <li><a href="#nogo">Contact Us</a> <ul id="g3"> <li><a href="contact/index.html">Contact Us</a></li> <li><a href="contact/submit.html">Submit Stuff</a></li> </ul> </li> <!-- End Contact Us Nav --> </ul> </div>

Yeah, that's why I'm here asking for help. Yeah, I know. I'm not unveiling the site until late this summer, so I have time to get something done up in javascript for IE 6.0 using IE conditional statements. Not sure if I'm going to try and have the js nav on the same page, or redirect it to a sub-directory.Thanks.

I took the suggestion and looked at a couple of sites online to change from javascript navigation to CSS navigation. Now I'm running into a new problem, and was wondering if you could help. When you roll-over my nav, the menu that pop-ups out in the wrong location on some screen resolutions. What can I do to fix this?http://www.ny-outdoors.com/tester/index.htmlHere's the CSS: #navmenu { width: 135px; position: static; font: 12px Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px;}#navmenu a { width: 135px; height: auto; padding-left: 2px; border: 1px solid #000; background: #003366; line-height: 20px; font-size: 12px; color: White;}#navmenu ul { padding: 0px; margin: 0px;}#navmenu ul li { list-style-type: none;}#navmenu ul li a:visited { display: block; text-decoration: none; color: #EEEEEE;}#navmenu ul li a { display: block; text-decoration: none; color: #FFFFFF;}#navmenu ul li a:hover { background: Yellow; color: Black;}#navmenu li ul { display: none;} #navmenu li:hover > ul#a3 { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;}#navmenu li:hover > ul#a3b { display: block; position: absolute; margin-top: -22px; left: 135px; text-align: left;} Here's the html: <div id="navmenu"> <div class="navhead">Navigation</div> <ul> <!-- Home Navigation --> <li><a href="index.html">Home</a></li> <!-- End Home Nav --> <!-- Begin About Us Nav --> <li><a href="#nogo">About Us</a> <ul id="a3"> <li><a href="about/index.html">About the Website</a></li> <li><a href="about/staff.html">About the Staff</a></li> </ul> </li> <!-- End About US Nav --> <!-- Begin Interact Nav --> <li><a href="#nogo">Interact With Us</a> <ul id="a3"> <li><a href="forums/">Forums</a></li> <li><a href="gallery/">Photo Gallery</a></li> </ul> </li> <!-- End Interact Nav --> <!-- Begin Attractions Nav --> <li><a href="attractions/index.html">Local Attractions</a> <ul id="a3"> <li><a href="attractions/automotive.html">Automotive</a></li> <li><a href="attractions/theater.html">Theater & Plays</a></li> <li><a href="attractions/food_beverage.html">Food & Beverages</a></li> </ul> </li> <!-- End Attractions Nav --> <!-- Begin Events Nav --> <li><a href="events/index.html">Events</a> <ul id="a3"> <li><a href="events/fund_raisers.html">Fund Raisers</a></li> <li><a href="events/community/index.html">Community Events</a> <ul id="a3b"> <li><a href="events/community/mara_maple.html">Marathon Maple Festival</a></li> </ul> </li> <li><a href="events/sports.html">Sports</a> <ul id="a3b"> <li><a href="events/sports/baseball.html">Baseball</a></li> <li><a href="events/sports/hockey.html">Hockey</a></li> <li><a href="events/sports/golf.html">Golf</a></li> <li><a href="events/sports/other.html">Other Sports</a></li> </ul> </li> </ul> </li> <!-- End Events Nav --> <!-- Begin Concerts Nav --> <li><a href="#nogo">Concerts & Gatherings</a> <ul id="a3"> <li><a href="shows/concerts.html">Concerts</a></li> <li><a href="shows/gatherings.html">Gatherings & Get Togethers</a></li> </ul> </li> <!-- End Concerts Nav --> <!-- Begin Music Nav --> <li><a href="localmusic/index.html">Local Music</a> <ul id="a3"> <li><a href="music/events.html">Music Events</a></li> <li><a href="music/rock.html">Rock/Metal</a></li> <li><a href="music/country.html">Country</a></li> <li><a href="music/classic.html">Classic Rock</a></li> <li><a href="music/other.html">Other Genres</a></li> </ul> </li> <!-- End Music Nav --> <!-- Begin Contact Us Nav --> <li><a href="#nogo">Contact Us</a> <ul id="a3"> <li><a href="contact/index.html">Contact Us</a></li> <li><a href="contact/submit.html">Submit Stuff</a></li> </ul> </li> <!-- End Contact Us Nav --> </ul> </div>

What links?

Do you have a link or some code for us to look at?Look at the source for this:img bg for div

Thanks for the help guys. I hope I can get this figured out. While I have yet to sit down and work strictly on it yet, I have messed around with it a little here and there. So far, no luck. I'll be back once I can sit down and concentrate on it if/when I run into problems.

Yeah, I've been playing with that all weekend. Of course, I find it after I made my post. I'll keep messing with it, and if I run into any problems, I'll be back. Thanks.

I just started working for this company, and one of my jobs is going through their website and updating it. Once it is updated, they want the entire thing re-written, and myself and the rest of the IT dept. want to get rid of as much javascript as we can, and use CSS. The biggest obstacle for me is going to be the navigation. Take this page for example:http://pmiapp.com/products/index.htmlThe main site navigation is on the left, and the main products navigation is on the top. The main nav has fly-out menus, while the top is a drop down type of menu. All of my experience with CSS in the past has been just basic formatting; background colors, widths, fonts, etc. I really haven't done a whole lot with it, as my clients haven't needed it. (I still use tables for site layouts because I haven't had the time to learn more on CSS.)If anyone can point me in the right direction where I can figure out how to do these menus, I'd appreciate it.Al

I found something on the main website. Kind of works, but I can''t get the CSS formattting to work now. Oh well, better than where I was.

I'm working on a project for work and need some help. We currently have a (junk) javascript hover menu for our products page. Here's the problem: it works fine in IE6 and later, but doesn't work at all in IE 7.0. All we want to do right now is get it working in IE 7.0 using javascript because we know JS works in the older versions of IE. Eventually, we want to re-do the entire site using CSS, XML, etc., but right now, we need the navigation menu to work in IE 7.0.Basically, the menu is 5 sections, and each section should have a vertical menu that shows up when that section is hovered over, which will contain links to the different products for that type of product.Thanks for the help.Al

Anyone know where I can get help with Perl programming? I've found stuff online, but I guess I'm doing something wrong, as when I upload the code to my server, I keep getting 500 errors when I open the file in my browser.Al