1 Reply Latest reply on Jun 12, 2012 6:38 AM by osgood_

    Drop Down Menus Don't Drop Down

    REO22

      I am having a problem with my Spry Menu Bar. (Using CS5). In my template, all of the submenu items of the menu bar show as being there and I can navigate through them. However, when I save the file so I can preview (using F12) it working on my homepage, the drop down items do not appear in the preview. When I move this to my live site folder, I fear they still will not drop down and mine is a page that has a lot in the drop down menus that needs to be accessible. Here is the code from the template:

       

      <style type="text/css">
      body {
      width: 960px;
      padding: 1 px;
      margin: auto;
      background: #42413c;
      }
      a:link {
      color: #000;
      text-decoration: underline;
      }
      .container {
      width: 960px;
      background: #FFF;
      }
      .header {
      background: #42413c;
      padding: 0;
      margin: auto;
      }
      .News {
      background: #CCC;
      width: 200px;
      text-align: center;
      margin: 5px;
      padding: 5px;
      float: left;
      }
      #Content {
      width: 728px;
      text-align: center;
      margin: 5px;
      padding: 5px;
      float: left;
      }
      #CrisisIntervention {
      width: 190px;
      text-align: center;
      margin: 5px;
      padding: 5px;
      float: left;
      border-top-width: thin;
      border-right-width: thin;
      border-bottom-width: thin;
      border-left-width: thin;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: solid;
      border-top-color: #333;
      border-right-color: #333;
      border-bottom-color: #333;
      border-left-color: #333;
      }
      #FallenHeroes {
      width: 960px;
      text-align: center;
      }
      .footer {
      width: 940px;
      padding: 10px;
      background: #eee;
      position: relative;
      clear: both;
      }
      a:visited {
      text-decoration: underline;
      color: #300;
      }
      a:hover {
      text-decoration: none;
      color: #000;
      }
      a:active {
      text-decoration: underline;
      }
      /*Menu Bar styling classes*/
      ul.MenuBarHorizontal{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      cursor: default;
      width: auto;
      }
      ul.MenuBarActive{
      z-index: 1000;
      }
      ul.MenuBarHorizontal li{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      position: relative;
      text-align: left;
      cursor: pointer;
      width: 10em;
      float: left;
      }
      ul.MenuBarHorizontal ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      z-index: 1020;
      cursor: default;
      width: 10em;
      position: absolute;
      left: -1000em;
      }
      ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
      left: auto;
      }
      ul.MenuBarHorizontal ul li{
      width: 10em;
      }
      ul.MenuBarHorizontal ul ul{
      position: absolute;
      margin: -5% 0 0 95%;
      }
      ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
      left: auto;
      top: 0;
      }
      ul.MenuBarHorizontal ul{
      border: 1px solid #CCC;
      }
      ul.MenuBarHorizontal a {
      display: block;
      cursor: pointer;
      background-color: #eee;
      padding: 0.5em 0.75em;
      color: #000;
      text-decoration: none;
      border:2px solid;
      border-top-color:#C4C9DB;
      border-right-color:#565968;
      border-bottom-color:#565968;
      border-left-color:#C4C9DB;
      }
      ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
      background-color: #393769;
      color: #FFF;
      }
      ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
      background-color: #33C;
      color: #FFF;
      }
      ul.MenuBarHorizontal a.MenuBarItemSubmenu{
      background-image: url(SpryMenuBarDown.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
      }
      ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{
      background-image: url(SpryMenuBarRight.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
      background-image: url(SpryMenuBarDownHover.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
      }
      ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{
      background-image: url(SpryMenuBarRightHover.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
      }
      ul.MenuBarHorizontal iframe{
      position: absolute;
      filter:alpha(opacity:0.1);
      z-index: 1010;
      }
      </style>
      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      </head>

      <body>
      <div class="container">
      <div class="header"><img src="../Graphics/headerbanner.jpg" width="960" height="90" /></div>
      <div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="../Home2.html">Home</a>    </li>
          <li><a href="../AboutUs.html" class="MenuBarItemSubmenu">About Us</a>
            <ul>
              <li><a href="../Leadership.html">Leadership</a></li>
      <li><a href="../History.html">History</a></li>
      <li><a href="../SocialNetworks.html">Social Networks</a></li>
      <li><a href="Join" _mce_href="http://www.nationalguard.com/">Join">http://www.nationalguard.com/">Join the Army National Guard</a></li>
      <li><a href="Join" _mce_href="http://www.goang.com/Calendar">Join">http://www.goang.com/Calendar">Join the Air National Guard</a></li>
            </ul>
          </li>
          <li><a href="../Organization.html" class="MenuBarItemSubmenu">Organization</a>
            <ul>
      <li><a href="../Army.html">Army National Guard</a></li>
      <li><a href="../Air.html">Air National Guard</a></li>
      <li><a href="TEMAhttp://www.tnema.org/">TEMA</a></li>
      <li><a href="../StateGuard.html">Tennessee State Guard</a></li>
      <li><a href="../JointPublicAffairs.html">Joint Public Affairs </a></li>
      <li><a href="../Environmental.html">Environmental</a></li>
      <li><a href="../IG.html">Inspector General</a></li>
      <li><a href="../JAG.html">Judge Advocate General</a></li>
      <li><a href="../WarrantOfficer.html">Warrant Officers</a>  </li>
            </ul>
          </li>
          <li><a href="../JointPublicAffairs.html" class="MenuBarItemSubmenu">Community Support</a>
            <ul>
              <li><a href="../Overview.html">Overview</a></li>
              <li><a href="../AviationSupport.html">Aviation Support</a></li>
              <li><a href="../NonAviationSupport.html">Non-Aviation Support</a></li>
              <li><a href="../Band.html">Band</a></li>
              <li><a href="../ColorGuard.html">Color Guard</a></li>
              <li><a href="../Speaker.html">Speaker</a></li>
              <li><a href="../WhatCanIDo.html">What Can I Do?</a></li>
            </ul>
          </li>
          <li><a href="../WarriorResources.html" class="MenuBarItemSubmenu">Warrior Resources</a>
            <ul>
      <li><a href="../DAPhotos.html">Request a DA Photo</a></li>
      <li><a href="../Education.html">Education</a></li>
      <li><a href="../Veterans.html">Veterans</a></li>
      <li><a href="../Resiliency.html">Resiliency</a></li>
      <li><a href="../Careers.html">Careers</a></li>
      <li><a href="../EmploymentAssistanceWorkshops.html">Employment Assistance Workshops</a></li>
      <li><a href="../YellowRibbon.html">Yellow Ribbon</a></li>
      <li><a href="../CCRF.html">Combat Casualty Relief Fund</a></li>
            </ul>
          </li>
          <li><a href="../FamilyPrograms.html" class="MenuBarItemSubmenu">Family Programs</a>
            <ul>
      <li><a href="#">Employer Support of the Guard and Reserve</a></li>
      <li><a href="../MFLC.html">Military Family Life Consultants</a></li>
      <li><a href="../FamilyAssistance.html">Family Assistance Centers</a></li>
      <li><a href="../YouthCamps.html">Youth Camps</a></li>
      <li><a href="../Resiliency.html">Resiliency</a></li>
      <li><a href="Operation" _mce_href="http://www.operationmilitarykids.org/public/home.aspx">Operation">http://www.o perationmilitarykids.org/public/home.aspx">Operation: Military Kids</a></li>
      <li><a href="Military" _mce_href="http://www.militaryonesource.mil/MOS/f?p=MOS:HOME:0::::">Military">http://www. militaryonesource.mil/MOS/f?p=MOS:HOME:0::::">Military OneSource</a></li>
      <li><a href="../CCRF.html">Combat Casualty Relief Fund</a></li>
            </ul>
          </li>
      </ul>
      </div>
      <script type="text/javascript">
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      </script>
      <div class="body"><!-- TemplateBeginEditable name="Content" -->
        <div id="Content">
          <h2>&quot;Volunteer Traditions, Modern Missions&quot;</h2>
          <p> </p>
          <p> </p>
          <p> </p>
      </div>

       

       

       

      PLEASE HELP ME!!!!