Ok I've gotten this little script that is like the one shown here:

http://www.tanfa.co.uk/css/examples/menu/hs7.asp

It works almost perfect except for a few things.

1. I would like the first button to not be a drop down but rather just a link to home. How can I do this?

2. I would like the text of each main button to change color when I rollover it. How??

Here is the css code I'm sure the answer lies here:

body { behavior:url("csshover.htc"); }

#menu {
width: 100%;
background: #006699;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu a, #menu h2 {
font: bold 12px/12px arial, helvetica, sans-serif;
display: block;
margin: 0;

}

#menu h2 {
color: #fff;
background: #006699;
/* text-transform: uppercase; */
text-align:left;
padding: 10px 10px;
}

#menu a {
color: #006699;
background: #efefef;
text-decoration: none;
width: 12em;
border-color: #ccc #ccc #ccc #ccc;
border-width: 1px;
border-style: solid;
padding: 5px 5px;
}

#menu a:hover {
color: #FDCE0C;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

Any Ideas?