# Drop down menu



## Dariune (Aug 4, 2005)

Hi guys

I am having a very frustrating time with some code i took from http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

I am trying to create a drop down menu for my site. I am begginning to get to grips with html and am confident on how to use it but i know very little Javascript.

My problem is that it doesnt work, the sropdown part (the second div) just appears below the navigation box (the 1st div) Now i rather feel that it must have something to doing with me not pointing to the JS file correctly or at all.

If any of you are able to help me it would a lot to me. I have been working on this for 6 hours now and have found no way to make this work.

Below is the code for the page.


```
<!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=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Dragon's Touch - Home</title>
<!-- TemplateEndEditable -->
<style type="text/css"> 
<!-- 
body { 
    background-color: #000000;
}
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #b46633;
}
-->
--> 
</style> 
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
a:link { 
    color: #b46633; 
} 
.style3 {font-size: medium}
a:visited {
	color: #d01foa;
}
a:hover {
	color: #d01foa;
}
a:active {
	color: #d01foa;
}
--> 
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<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>
<link href="../dropdowntabs/dropdowntabfiles/ddcolortabs.css" rel="stylesheet" type="text/css" />
</head> 

<body onload="MM_preloadImages('../Images/Linkart/links_b.gif')"> 
<div class="style3" id="outer"> 
    <div id="Header"></div>
	<div id="SecNav"><p align="center">Secondary Navigation<br />
	
	<div id="ddcolortabs" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>
	
	<!--1st drop down menu --> 
<div id="dropmenu1" class="ddcolortabs">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>
"
"

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
</script>
	
	</div>
    <div id="links"><br />
      <p align="left">Home<br />Dragons<br />Etc
      
      <div id="news"> 
	  This is the news area
	  <!-- TemplateBeginEditable name="News" -->News<!-- TemplateEndEditable -->
    <p>      Dragons Touch will be launching our first DT Festival in 2009 </p>
	  </div>
  </div> 
  
  
    <div id="Main">
      <div align="center">

<!-- TemplateBeginEditable name="Main" --><!-- TemplateEndEditable --></div>
    </div> 
	
	
<div id="Footer"><img src="../Images/Footer2.png" width="400" height="107" /></div>
</div>
</body> 
</html>
```
If you need the css or JS i am happy to give them to you but i dont want to confuse matters if you dont need them.

On a side note, i was helped a little while ago and made a promise to support this site. That has not been forgotten. When the rehash of my site has been completed (what i am currently working on) then i will link to techguy. Also when i have paid off my house bills then of course i will donate. So please dont think me ungrateful, i have not forgotten the help i have already recieved and i am sorry to ask help from you all again.

Many thanks
Dariune


----------



## matt-h (Apr 30, 2006)

By the looks of it:

You've changed this line:

to

but havent changed this line:
tabdropdown.init("bluemenu", 0)

Change bluemeny to ddcolortabs and that may fix your problem.


----------



## Dariune (Aug 4, 2005)

Oh yes, well noticed  

However i have now changed that and it still doesnt work 

DOnt you need to tell the html page to look at the JS page somewhere? Or am i wrong?

Thanks for your help so far


----------



## matt-h (Apr 30, 2006)

Hmmm.... downloaded the example files and had another look:



The class should be "ddcolortabs_a", as the dropdown boxes should have different styling to the box they appear under.


----------



## Dariune (Aug 4, 2005)

Hmmm i tried that and didnt work. 

Have you managed to get it working? 
Am i just being really dumb?


----------



## matt-h (Apr 30, 2006)

Is this page of yours on the web yet? If so can you give a link so I can have a look?


----------



## Dariune (Aug 4, 2005)

Im afraid its not. I can give you the Css pages and the JS page if that would help?


----------

