Having background on button when clicked on but not hovering vuejs - vue.js

Question

Explanation
I have an icon in a button that when clicked opens a menu.
If I want to get the menu correctly under button I need to change the height, because there doesn't seem to be another option (margin doesn't work). But then I get A background hover effect while not hovering over the button.
So to understand.
Once I click on the button but don't hover over the button I get the effect.
The shape is because I changed the height en width.
Background-color: transparant !important; Doens't work
This is the component file
<template>
<v-menu
:close-on-click="true"
offset-y
transition="slide-y-transition"
v-model="language_menu_open"
return-value="language_menu_open = false">
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
v-ripple="false"
icon
depressed
class="language-button">
<v-icon>{{functionMenu(language_menu_open)}}</v-icon>
<v-icon style="margin-right: 10px !important;">mdi-web</v-icon>
</v-btn>
</template>
<v-list class="language-dropdown">
<v-list-item
v-for="language in languages"
:key="language.title"
v-ripple="false"
#click="language">
<v-list-item-title>{{language.title}}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
export default {
name: "Languages",
data() {
return {
language_menu_open: false,
languages: [
{title: "Nederlands"},
{title: "English"},
{title: "Deutsch"}
],
functionMenu: function chevronChanger(menu_state) {
if (menu_state) {
return "mdi-chevron-up"
} else {
return "mdi-chevron-down"
}
}
}
}
}
</script>
<style scoped>
.language-button {
height: 45px !important;
width: 25px !important;
background-color: transparent !important;
}
.language-button:hover {
background-color: transparent !important;
}
.language-button:hover:before {
background-color: transparent !important;
display: none !important;
}
.language-dropdown {
padding: 0 !important;
}
.language-dropdown:hover:before {
background-color: transparent !important;
display: none;
}
</style>
Any help would be appreciated.

Answer 1

You stated that your primary goal is correct positioning of the menu below the button. Instead of changing the height/width of the button, you should use the nudge-top, nudge-bottom, nudge-right, and/or nudge-left props of the v-menu component. These allow you to precisely tune the positioning of the menu. For example, if you want to move the menu down (further below the button), set the nudge-bottom prop to the number of pixels you want it to move. See documentation here. Using this approach, you don't need to modify the hover effect of your button, which will result in a better user experience.
Also, there is one portion of your template that is inefficient. For one of the icons, you have {{functionMenu(language_menu_open)}}. If possible, you should not use methods in a template except as event handlers, because methods break Vue's reactivity engine. In this case, it would be much better to define a computed property, like this:
computed: {
buttonChevron: function() {
if (this.language_menu_open) {
return "mdi-chevron-up"
} else {
return "mdi-chevron-down"
}
}
}
Then, in your template, instead of {{functionMenu(language_menu_open)}}, use {{ buttonChevron }}. This will have the same effect as your current function, but Vue will handle the changes much more efficiently. (In this particular component, the change will be negligible, but it's a good habit to build.) You can read more about computed properties here.

Answer 2

Try This:
.language-button:active {
background-color: transparent !important;
}