How to hide div after click on an element using pure css?-CodePudding

Actually, i'm building a CSS Main Menu in Vue, it works fine when mouse hover it'll popup while hidden when mouse move out, but how can i also hide the menu when click on "a" hyperlink?

I've try ".menu a:active { display: none; }", but failed.

.menu {
  display: none;
}

.menu a {
  display: block;
}

.main:hover .menu {
  display: block;
}

<div >
    <button>Main Menu Title</button>
    <div >
        <a>Sub Menu Title</a>
    </div>
</div>

CodePudding user response：

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

CodePudding user response：

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