Hi, I 'think' this is a JavaScript problem, but I am not sure. I am trying to make a modified layout using one of Dreamweaver's preformed layouts. The original layout has a navigation bar across the top of the page, that has drop down menu items. In the original form, the layout works. When you mouse over one of the main menu items, a horizontal list of sub menu items drops down below the navigation bar. The original code had a side navigation bar on the left side of the content. I modified it to have a mirrored navigation bar on the right side of the content too. Now, when I mouse over one of the main menu items on the top navigation bar, the horizontal list of sub menus flashes open for a split second and immediately dissappears. Anyone have a problem like this before? Know of any possible solutions? As far as I know, I didn't change any code that was in relation to the top navigation bar.
Here is the modified code: (I shortened up the subglobal link lists to only one when I posted here to save space.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="jpc_nav_both.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
link</a>
</div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> |
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> |
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> |
</div>
<div id="subglobal4" class="subglobalNav">
<a href="#">subglobal4 link</a> |
</div>
<div id="subglobal5" class="subglobalNav">
<a href="#">subglobal5 link</a> |
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">subglobal6 link</a> |
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#">subglobal7 link</a> |
</div>
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> |
</div>
</div>
<!-- end masthead -->
<div id="pagecell1">
<!--pagecell1-->
<img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr">
<div id="navBar">
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
</div>
<!--end navBar div -->
<div id="headlines">
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div id="advert">
<img src="" alt="" width="107" height="66"> Ad copy ad copy ad copy. Ad
copy ad copy.</div>
</div>
<div id="content">
<div class="feature">
<p>Matsushim Suzuki Racing Team </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.</p>
<p>
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. </p>
</div>
</div>
<!--end content -->
<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003
Company Name
</div>
</div>
<!--end pagecell1-->
<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</body>
</html>