Stupid Menu (fail)

CODEPEN

Stupid Menu (fail)

---

HTML

 <div id="back_image">
        <div class="menu_box">
            <ul id="menu">
                <i id="home" class="fas fa-home"></i>
                <li class="">
                    <a>About</a>
                </li>
                <li>
                    <a class="menu_1">Products
                        <ul id="bot_menu_1">
                            <li>Products item</li>
                            <li>Products item</li>
                            <li>Products item</li>
                        </ul>
                    </a>
                </li>
                <li>
                    <a class="menu_2">Services
                        <ul id="bot_menu_2">
                            <li>Products item</li>
                            <li>Products item</li>
                            <li>Products item</li>
                        </ul>
                    </a>
                </li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>

---

CSS (sass)

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
body{
    padding: 0;
    margin: 0;
    height: 100vh;
    font-family: 'Fjalla One', sans-serif;


    #back_image{
        position: relative;
        background: url("https://images.pexels.com/photos/169573/pexels-photo-169573.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
        background-size: cover;
        height: 100vh;
        width: 100%;
        .menu_box{
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            #menu{
                display: flex;
                float: left;
                width: 400px;
                background: #a1a1a1;
                text-align: center;
                padding: 0;
                cursor: pointer;
                #home{
                    margin: 0px;
                    padding: 10px;
                    background: #262626;
                    color: #eee;
                    transition: 1s;
                    &:hover{
                        transform: scale(1.2) rotateX(360deg);
                    }
                }
                li{
                    width: 90px;
                    list-style: none;
                    line-height: 40px;
                    transition: 1s;

                    &:hover{
                        transform: scale(1.2);
                        background: #262626;
                        color: #eee;     
                    }

                    a{
                        ul{
                            width: 54px;
                            position: relative;
                            font-size: 12px;
                            display: none;
                            background: #a1a1a1;
                            transition: .5s;
                            li{
                                margin-left: -35px
                            }
                        }
                    }
                    .active{
                        ul{
                            display: block;
                            position: absolute;
                        }
                    }
                }
            }
        }
    }
}

---

JS

        let box = document.querySelectorAll("A");

        box.forEach((x)=> x.addEventListener("click",function(){
            this.classList.toggle("active");
        }))