HTML Drop-down Menu

<style>
.menu {
    position: relative;
    top: 0;
    left: 0;
    text-align: center;
}

.menu a {
    background-color: #cccccc;
    display: block;
    float: left;
    width: 120px;
    line-height: 2em;
    text-decoration: none;
}

.menu a:hover {
    background-color: #bbbbbb;
}

#menu1 {
    position: absolute;
    left: 0;
    top: 0;
}

#menu2 {
    position: absolute;
    left: 121px;
    top: 0;
}

.submenu {
    visibility: hidden;
}

.submenu a {
    background-color: #aaaaaa;
    border-top: solid 1px #ffffff;
    display: block;
    float: none;
}
</style>

<script type="text/javascript">
<!--
function MenuOn( x ) {
    document.getElementById( "submenu" + x ).style.visibility = "visible";
}

function MenuOff( x ) {
    document.getElementById( "submenu" + x ).style.visibility = "hidden";
}
-->
</script>

<div class="menu">

<div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)" >
    <a href="" class="menuhead">Menu 1</a>
    <div class="submenu" id="submenu1">
        <a href="">Topic 1-1</a>
        <a href="">Topic 1-2</a>
        <a href="">Topic 1-3</a>
    </div>
</div>

<div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)" >
    <a href="" class="menuhead">Menu 2</a>
    <div class="submenu" id="submenu2">
        <a href="">Topic 2-1</a>
        <a href="">Topic 2-2</a>
        <a href="">Topic 2-3</a>
        <a href="">Topic 2-4</a>
    </div>
</div>