Jump to content

JS Hover menu


Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...