Menu Bar with Drop-Down Layer

[rockshox]

I am trying to code a navigation bar where the cell changes color and underlines when the mouse rolls over. Then when you click on the link a layer drops down where you can click on to go to that HTML page. The navigation bar will work on its own and the layer will work on its own, but they will not work together. Here are the functions:

// Function to show a menu
function showHide(layerid)
{
if (document.getElementById(layerid).style.visibility != "hidden")
{
document.getElementById(layerid).style.visibility = "hidden";

}
else
{
document.getElementById(layerid).style.visibility = "visible";
}
}

//activate link
function linkOn(currentLink,cell){
currentLink.style.color = "#990000";
currentLink.style.fontWeight = "bold";
currentLink.style.textDecoration = "underline";

var currentCell = document.getElementById(cell);
currentCell.style.backgroundColor = "#cccccc";
}

//deactivate link
function linkOff(currentLink,cell){
currentLink.style.color = "#ffffff";
currentLink.style.fontWeight = "normal";
currentLink.style.textDecoration = "none";

var currentCell = document.getElementById(cell);
currentCell.style.backgroundColor = "#666666";
}

Here is the CSS:

<style type="text/css">
a{ font-family: arial, helvetica, sans-serif;
color: #ffffff margin-left:50px;
text-decoration: none; color:#cc00ff;}
.toolbar { background-color: #666666; }
</style>

Here are the event handlers:

<td width="100" class="toolbar" id="LinksLayer">

<div id="LinksLayer"
style="position:absolute; left:165px; top:98px;
width:100px; height:85px; z-index:2;
background-color:#33ffff; layer-background-color:ffffff;
visibility:hidden"> <a href="#">basil</a><br>
<a href="#">pepermint</a><br>
<a href="#">oregano</a><br>
<a href="#">cypress</a><br>
</div>

<a href="#"

onMouseOver="linkOn(this, 'LinksLayer');"
onMouseOut="linkOff(this, 'LinksLayer');"
onClick="showHide('LinksLayer');">Links</a>

</td>

If anyone has any ideas I would greatly appreciate it. Thanks.