[Vuejs]-How to hide div after click on an element using pure css?

.menu a:active { display: none; } will work only when mouse button will be pushed until you release it.
Unfortunately you won’t be able to implement this idea using pure CSS.
I would recommend you to add additional class on click, for example:

.hidden {
    display: hidden;
}

But you will have to use JavaScript.

In my own view, I think you are having a very powerful tool with you but you are under using it. Vue.js can do the task you want effortlessly.

<script setup>
import { ref } from 'vue'

const showMenu = ref(false)
const ToggleMenu = () => {
    showMenu.value = !showMenu.value  
}
</script>

<template>
  <div class="main">
    <button @click="ToggleMenu">Main Menu Title</button>
    <div v-if="showMenu" class="menu">
        <a>Sub Menu Title</a>
    </div>
</div>
</template>
<style>
.menu a {
  display: block;
}
</style>