Live Preview, http://www.digennarodesigns.com/tutorials/JS_Drop_Down/
First we've going to create the HTML section of the JS,
Add this bit of code where you want your drop down,
CODE
<div id="menu">
<ul id="nav">
<li><a href="i#">Home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Music</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Discography</a>
<a href="#">Lyrics</a>
<a href="#">Learn To Play</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Community</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Forum</a>
<a href="#">News</a>
<a href="#">Street Team</a>
<a href="#">Affiliates</a>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
<div style="clear:both"></div>
</div>
<ul id="nav">
<li><a href="i#">Home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Music</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Discography</a>
<a href="#">Lyrics</a>
<a href="#">Learn To Play</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Community</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Forum</a>
<a href="#">News</a>
<a href="#">Street Team</a>
<a href="#">Affiliates</a>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
<div style="clear:both"></div>
</div>
This is the basic drop down, it's just a <ul> with some javascript added to make the hover's work.
Next to make this code actually work you need to create the javascript (*Note that I didn't write the Javascript for this dropdown it's just the best code I found).
Create a new document and save it as "dropdown.js" you can do this in Notepad or any html editor.
Paste this code into the document and save.
CODE
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
This is basically it, except one key element, the link to the JS
CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
</style>
<script type="text/javascript" src="dropdown.js"></script>
</head>
<head>
<title>Hello!</title>
</style>
<script type="text/javascript" src="dropdown.js"></script>
</head>
Now this is a bit boring so add some CSS to it, here's an example, I'm not going to explain it though,
CODE
#menu {
background: #392115;
width: 270px;
height: 32px;
margin: 0 0;
position: relative;
}
#nav{
padding-top: 7px;
padding-left: -1px;
margin: 0 0;
z-index: 30;}
#nav li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;}
#nav li a
{ display: block;
margin: 0 0 0 0;
padding: 0 0;
width: 90px;
height: 32px;
background: #392115;
color: #d4cebd;
text-align: center;
line-height: 29px;
text-decoration: none;}
#nav li a:hover
{ background: #5a0e09;}
#nav div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #d0bb8c;
border: 1px solid #392115;}
#nav div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #392115;
color: #330000;
font: 11px arial;}
#nav div a:hover
{ background: #766441;
color: #330000;}
background: #392115;
width: 270px;
height: 32px;
margin: 0 0;
position: relative;
}
#nav{
padding-top: 7px;
padding-left: -1px;
margin: 0 0;
z-index: 30;}
#nav li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;}
#nav li a
{ display: block;
margin: 0 0 0 0;
padding: 0 0;
width: 90px;
height: 32px;
background: #392115;
color: #d4cebd;
text-align: center;
line-height: 29px;
text-decoration: none;}
#nav li a:hover
{ background: #5a0e09;}
#nav div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #d0bb8c;
border: 1px solid #392115;}
#nav div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #392115;
color: #330000;
font: 11px arial;}
#nav div a:hover
{ background: #766441;
color: #330000;}
Enjoy!
Kevin DiGennaro
But yea... fix the previews and ill see what my complains are 
. For all of us that would like to see the action could you please repost the page .... Hmmm?