I created a Horizontal Spry Menu Bar with submenus and it works perfectly on the page I created it on. I added the same code, and linked the CSS and .js file to my template for the site, but it is actling like the .js isn't attached, even in the Live View mode. The css is linked correctly-- it has the right appearance, but no submenus appear on rollover. Any recommendations?
To view the beta site of the page it does work on (this page does not use the template):
http://www.gilbertassociates.com/new09/gahome1.html.
To view a page with using the template:
http://www.gilbertassociates.com/new09/products.html
The Code for the template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen"
href="../CSSFiles/ie.css" />
<![endif]-->
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript" src="../../SpryAssets/SpryMenuBar.js"></script>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- TemplateParam name="scndrynav" type="boolean" value="true" -->
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<table width="907" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="245" rowspan="2"><div class="galogo"><a href="gahome1.html"><img src="images/new/galogo.png" alt="Gilbert & Associates" width="199" height="86" border="0" /></a></div></td>
<td height="40" colspan="2"><div class="quicklinks">
<ul>
<li><a href="support.html">Support Links</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div></td>
</tr>
<tr>
<td height="37" colspan="2"><!-- TemplateBeginEditable name="header" -->
<div class="keywords">
<h1>Content for class "keywords" Goes Here</h1>
</div>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td width="245"> </td>
<td width="59" height="40"> </td>
<td width="603">
<div class="links">
<ul id="Navigation" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="products.html">Products</a>
<ul>
<li><a href="nav.html">Microsoft Dynamics NAV</a></li>
<li><a href="SagePro.html">Sage Pro ERP</a></li>
<li><a href="sagecrm.html">Sage CRM</a></li>
<li><a href="addon.html">Add-On Products</a></li>
</ul>
</li>
<li><a href="solutions.html" class="MenuBarItemSubmenu">Solutions</a>
<ul>
<li><a href="wholesaledistribution.html">Wholesale Distribution</a></li>
<li><a href="manufacturing.html">Manufacturing</a></li>
<li><a href="financialmanagement.html">Financial Management</a></li>
<li><a href="crm.html">Customer Relationship Management</a></li>
</ul>
</li>
<li><a href="resources.html" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="doc.html">Document Library</a></li>
<li><a href="news.html">Newsletter</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="TheTeam.html">Who We Are</a></li>
<li><a href="teambios.html">Our Team</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
</table>
<!-- end #header -->
</div>
<div id="sidebar1">
<table width="200" border="0" align="center" cellpadding="0" cellspacing="2" id="logoholder">
<tr>
<td colspan="2"><div id="tagline"></div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><div id="sagelogo"></div></td>
<td><div id="msftlogo"></div></td>
</tr>
<tr>
<td height="18" colspan="2"> </td>
</tr>
</table>
<div class="scndrynav"></div>
<!-- TemplateBeginEditable name="CustomerQuote" -->
<div class="quote" id="quote">
<h4>"Content for class "quote" Goes Here, centered"</h4>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- TemplateEndEditable -->
<p> </p>
<!-- TemplateBeginEditable name="Sidebar" -->
<h3> </h3>
<h3>Sidebar1 Content</h3>
<p>text</p>
<!-- TemplateEndEditable -->
<!-- end #sidebar1 --></div>
<!-- TemplateBeginEditable name="MainContent" -->
<div id="mainContent">
<h1> </h1>
<p> </p>
<!-- end #mainContent -->
</div>
<!-- TemplateEndEditable -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Seattle, WA | p:206.284.4348 | <a href="mailto:kristen@gilbertassociates.com">Email Us</a><br />
<a href="privacy.html">Privacy Statement</a> | <a href="sitemap.html">Site Map </a><br />
©2009 Gilbert & Associates, All Rights Reserved.</p>
<!-- TemplateBeginEditable name="footerkeywords" -->
<p>We are business process software experts specializing in Microsoft Dynamics NAV, Sage Pro ERP, and Sage CRM for small to mid-sized wholesale distribution and manufacturing companies in Washington and Alaska. </p>
<!-- TemplateEndEditable -->
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Kristen