I'm posting in the General Forum because my need for help involves .js and .css and .inc files. I wasn't sure which forum this would go to. Sorry.

I've been looking for a functioning dropdown menu for a long time searching the internet, most dating back many years, and testing out many. I've finally found this menu and set it up closer to what I'm looking for. The only thing now is the way it appears on my page.

Example: Test Page Loaded

The index3.shtm file is the only one I've messed with so far and is separate from the actively working site.

It's laid out as follows:
Code:
<head>

<script type="text/javascript" src="simpleDropDownMenu.js"></script>

<LINK rel=STYLESHEET href="http://www.prodieselracersassociation.com/simpleDropDownMenu.css" Type="text/css">

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<!--#include virtual="menu2.inc"-->

</body>
simpleDropDownMenu.js:
Code:
var TimeOut         = 300;
var currentLayer    = null;
var currentitem     = null;
var currentLayerNum = 0;
var noClose         = 0;
var closeTimer      = null;

function mopen(n) {
  var l  = document.getElementById("menu"+n);
  var mm = document.getElementById("mmenu"+n);

  if(l) {
    mcancelclosetime();
    l.style.visibility='visible';
    if(currentLayer && (currentLayerNum != n))
      currentLayer.style.visibility='hidden';
    currentLayer = l;
    currentitem = mm;
    currentLayerNum = n;
  } else if(currentLayer) {
    currentLayer.style.visibility='hidden';
    currentLayerNum = 0;
    currentitem = null;
    currentLayer = null;
 	}
}

function mclosetime() {
  closeTimer = window.setTimeout(mclose, TimeOut); }

function mcancelclosetime() {
  if(closeTimer) {
    window.clearTimeout(closeTimer);
    closeTimer = null;
  }
}

function mclose() {
  if(currentLayer && noClose!=1)   {
    currentLayer.style.visibility='hidden';
    currentLayerNum = 0;
    currentLayer = null;
    currentitem = null;
  } else {
    noClose = 0;
  }
  currentLayer = null;
  currentitem = null;
}

document.onclick = mclose;
simpleDropDownMenu.css:
Code:
#dd {
  margin-left: 40%;
  padding: 0 0 20px 0;
}

#dd li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: center;
  font: bold 42px arial;
}

#dd li a.menu {
  display: block;
  text-align: center;
  background: #5970B2;
  padding: 4px 10px;
  margin: 0 1px 0 0;
  color: #FFF;
  width: 200px;
  text-decoration: none;
}

#dd li a.menu:hover {
  background: #49A3FF;
}

.submenu {
  background: #EAEBD8;
  border: 1px solid #5970B2;
  visibility: hidden;
  position: absolute;
  z-index: 3;
}

.submenu a {
  display: block;
  font: 11px arial;
  text-align: center;
  text-decoration: none;
  font: bold 20px arial;
  padding: 5px;
  color: #2875DE;
}

.submenu a:hover {
  background: #49A3FF;
  color: #FFF;
}
menu2.inc:
Code:
<p align="center"><img 

src="http://www.prodieselracersassociation.com/images/PDRALOGOMediu

m.jpg" border="0" width="650" height="150"></p>

<ul id="dd">
  <li><a href="#" class="menu" id="mmenu1"
      onmouseover="mopen(1);"
      onmouseout="mclosetime();">PDRA</a>
    <div class="submenu" id="menu1"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a 

href="http://www.prodieselracersassociation.com/index.shtm">About 

Us</a>
        <a 

href="http://www.prodieselracersassociation.com/Classes.shtm">Drive

r Classes</a>
        <a 

href="http://www.prodieselracersassociation.com/Schedule.shtm">Even

t Schedule</a>
    </div>
  </li>
  <li><a href="#" class="menu" id="mmenu2"
      onmouseover="mopen(2);"
      onmouseout="mclosetime();">Members</a>
    <div class="submenu" id="menu2"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a 

href="http://www.prodieselracersassociation.com/Records.shtm">Recor

ds Held</a>
        <a 

href="http://www.prodieselracersassociation.com/Acknowledgements.sh

tm">Acknowledgements</a>
        <a 

href="http://www.prodieselracersassociation.com/Registratio.shtm">R

egistration</a>
        <a 

href="http://www.prodieselracersassociation.com/Links.shtm">Links</

a>
    </div>
  </li>
</ul>
My preferred result is to find a way to use this as I have, as the .js and .css file to keep my actual page content to its content and nothing more. I'm hoping that there can be a way to break this out of the <ul> format and into a horizontal format. That is my biggest objective right now. Can this be done, or does anyone know a better way to accomplish what I'm looking for? Also, I need this menu centered to the page and so far have not been able to figure out how to do that. All the other, font, color, etc., I think I've figured out. A future need might be to add levels to this.