Chiedo scusa per l'infinito codice che ora scrivo, ma è semplice e banale.. in fondo scriverò poi i miei problemi.. inizio già da ora a ringraziarvi

codice:
<html>
<head>
        <title>MENU SCOMPARSA</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #over{
                background:red;
            }
            body{
                background:black;
            }
            .button{
                background:grey;
                color:white;
                height:40px;
                width:150px;  
            }
            #tasto1{
                position:absolute;
                top:100px;
                left:20px;
            }
            #tasto2{
                position:absolute;
                top:143px;
                left:20px;
            }
            #tasto3{
                position:absolute; 
                top:186px;
                left:20px;
            }
            #blocco1{
                position:absolute;
                background:white;
                color:grey;
                z-index:99;
                left:170px;
                top:100px;
                height:126px;
                width:150px;
            }
            #blocco2{
                position:absolute;
                background:white;
                color:grey;
                z-index:99;
                left:170px;
                top:143px;
                height:126px;
                width:150px;
            }
            #blocco3{
                position:absolute;
                background:white;
                color:grey;
                z-index:99;
                left:170px;
                top:186px;
                height:126px;
                width:150px;
            }
             #blocco4{
                position:absolute;
                background:black;
                z-index:100;
                left:170px;
                top:100px;
                height:212px;
                width:150px;
            }
        </style>
        <script type="text/javascript">
            function cambia_indice(boxup,box2,box3,button1, button2, button3){
               document.getElementById(boxup).style.zIndex="101";
               document.getElementById(box2).style.zIndex="99";
               document.getElementById(box3).style.zIndex="99";
               document.getElementById(button1).style.background="white";
               document.getElementById(button1).style.color="grey";
               document.getElementById(button2).style.background="grey";
               document.getElementById(button2).style.color="white";
               document.getElementById(button3).style.background="grey";
               document.getElementById(button3).style.color="white";
            }
            function mantieni(button){
                document.getElementById(button).style.background="white";
                document.getElementById(button).style.color="grey";
            }
            function blackover(box1,box2,box3){
                document.getElementById(box1).style.zIndex="99";
               document.getElementById(box2).style.zIndex="99";
               document.getElementById(box3).style.zIndex="99";
            }
            function ritorna(button){
                document.getElementById(button).style.background="grey";
                document.getElementById(button).style.color="white";
            }
        </script>
    </head>
    <body>
        
        <div OnMouseOut="blackover('blocco1','blocco2','blocco3');">
            <div id="tasto1" class="button" onMouseOver="cambia_indice('blocco1','blocco2','blocco3','tasto1','tasto2','tasto3');"> LINK1</div>
            <div id="tasto2" class="button" onMouseOver="cambia_indice('blocco2','blocco1','blocco3','tasto2','tasto1','tasto3');"> LINK2</div>
            <div id="tasto3" class="button" onMouseOver="cambia_indice('blocco3','blocco2','blocco1','tasto3','tasto1','tasto2');"> LINK3</div>
            <div id="blocco1" onMouseOver="mantieni('tasto1'),cambia_indice('blocco1','blocco2','blocco3','tasto1','tasto2','tasto3');" OnMouseOut="ritorna('tasto1'),blackover('blocco1','blocco2','blocco3');">MENU1
MENU2
MENU3</div>
            <div id="blocco2" onMouseOver="mantieni('tasto2'),cambia_indice('blocco2','blocco1','blocco3','tasto2','tasto1','tasto3');" OnMouseOut="ritorna('tasto2'),blackover('blocco1','blocco2','blocco3');">MENU11
MENU21
MENU3</div>
            <div id="blocco3" onMouseOver="mantieni('tasto3'),cambia_indice('blocco3','blocco2','blocco1','tasto3','tasto2','tasto1');" OnMouseOut="ritorna('tasto3'),blackover('blocco1','blocco2','blocco3');">MENU11
MENU21
MENU3</div>
            <div id="blocco4"></div>
        </div>
    </body>
</html>
da poco mi sono avvicinato a questo linguaggio, se fate partire questa pagine visualizzerete l'effetto che desidero effettivamente ottenere.. la mia domanda è: esiste una strada più corta?
mi rifiuto di credere che serva tutto questo codice per una "cavolata del genere", infatti la mia è una soluzione MOLTO amatoriale.. vi prego delucidatemi vi ringrazio