CSS Drop Down Menu failure

[bpj111]

1) Script Title:

Chrome CSS Drop Down Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:

This was used on a mac and checked out using the latest version version of Firefox.

The script produced a vertical bullet list. None of the drop down menus worked - it is like the script was not present. The drop down menus show up as two lists at the end of the bullet list.
Here is how it displays.

Home
Mission
Services
Consulting
About Us
Downloads
Contact
Services Wireless Site Survey Security
Team Advisory Board Privacy Policy

Clearly it is not installed properly. There are no difference in the code when compared to the web site list (except my link changes) and the components were downloaded and then uplinked to my web page.

is there a dropmenudiv.css missing from the folder and thus not installed?

It looks like it is not seeing or performing the chromemenu script

Any suggestions?

Regards,

Bruce

[ddadmin]

On the same computer setup, does the menu on the DD demo page work for you? If so, please post a link to the page on your site that contains the problematic script so we can check it out.work for you.

[bpj111]

The web site using the drop down menu is

www.aitest.info/home.html

[bpj111]

The dynamicdrive.com demo works great as does the standalone demo.html. I have not tried to embed the demo as a page in my site to test it further.

I copied and pasted your code directly into my page and then added the .js and css files to files.

The drop down menus are seductively cool.

Regards,

Bruce

[jscheuer1]

You really haven't followed the installation process properly.

• The Chrome CSS Drop Down Menu styles (chromestyle.css) are not linked to the page. Without these, the markup will appear as an ordinary list.
  
• There should be only one external script tag (not counting your other scripts which appear not to conflict, thankfully) in the head with:
  
  

  <script type="text/javascript" src="Home_files/chrome.js">
  
  /***********************************************
  * Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  * This notice MUST stay intact for legal use
  * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  ***********************************************/
  
  </script>

• The call to 'startchrome' must be an ordinary script tag with no src attribute, and should appear only once, after all the Chrome CSS Drop Down Menu content:
  
  

  <div class="chromestyle" id="chromemenu">
  <ul>
  <li><a href="http://www.airinformatics.com">Home</a></li>
  <li><a href="http://www.airinformatics.com/Mission.html">Mission</a></li>
  <li><a href="#" rel="services1">Services</a></li>
  <li><a href="http://www.airinformatics.com/Consulting.html">Consulting</a></li>
  <li><a href="#" rel="about">About Us</a></li>
  <li><a href="http://www.airinformatics.com/Downloads.html">Downloads</a></li>
  
  <li><a href="http://www.airinformatics.com/Contact.html">Contact</a></li>
  </ul>
  </div>
  
  <!--1st drop down menu --> 
  <div id="services1" class="dropmenudiv" style="width: 150px;">
  <a href="http://www.airinformatics.com/Services.html">Services</a>
  <a href="http://www.airinformatics.com/Wireless_Site_Survey.html">Wireless Site Survey</a>
  <a href="http://www.airinformatics.com/Home.html">Security</a>
  </div>
  
  
  <!--2nd drop down menu --> 
  
  <div id="about" class="dropmenudiv" style="width: 150px;">
  <a href="http://www.airinformatics.com/Team.html">Team</a>
  <a href="http://www.airinformatics.com/Advisory_Board.html">Advisory Board</a>
  <a href="http://www.airinformatics.com/Home.html">Privacy Policy</a>
  </div>
  
  <script type="text/javascript">
  cssdropdown.startchrome("chromemenu")
  </script>

Doing those things will at least get it working. However, in a local mock up of your page with these changes there is a problem - the positioning of the drop downs is off. This can be fixed by moving these parts, and only these parts:

<!--1st drop down menu --> 
<div id="services1" class="dropmenudiv" style="width: 150px;">
<a href="http://www.airinformatics.com/Services.html">Services</a>
<a href="http://www.airinformatics.com/Wireless_Site_Survey.html">Wireless Site Survey</a>
<a href="http://www.airinformatics.com/Home.html">Security</a>
</div>


<!--2nd drop down menu --> 

<div id="about" class="dropmenudiv" style="width: 150px;">
<a href="http://www.airinformatics.com/Team.html">Team</a>
<a href="http://www.airinformatics.com/Advisory_Board.html">Advisory Board</a>
<a href="http://www.airinformatics.com/Home.html">Privacy Policy</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

to the last thing before the closing </body> tag.

[bpj111]

Thanks - that seemed to do it. It works great!

I have a little tweaking to do so I am not done yet.

Regards,

Bruce