.menu a:active { display: none; }只有在按下鼠标按钮直到释放它时才起作用。不幸的是，您不能使用纯CSS实现这个想法。我建议您在单击时添加额外的类，例如：

.hidden {
    display: hidden;
}

但是您必须使用JavaScript。

在我看来，我认为你有一个非常强大的工具，但你正在使用它。Vue.js可以毫不费力地完成你想要的任务。

<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>