Below is a drop-down menu with two rows of v-list items:
<v-menu
class="dropdown"
open-on-hover
offset-y
>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="rounded-xl green darken-3 text-capitalize elevation-2 ml-2"
dark
v-bind="attrs"
v-on="on"
>
The Society
</v-btn>
</template>
<v-list class="pa-6">
<v-list-item>
<v-row>
<v-col cols="12" sm="6">
<h1 class="display-1 orange--text">Important Info</h1>
<v-divider class="ma-3"></v-divider>
<v-list-item><v-btn class="ml-n6" text>Our Constitution <v-icon class="ml-3">mdi-security</v-icon></v-btn></v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
</v-col>
<v-divider vertical></v-divider>
<v-col cols="12" sm="6">
<h1 class="display-1 orange--text">Important Info</h1>
<v-divider class="ma-3"></v-divider>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
<v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
</v-col>
</v-row>
</v-list-item>
</v-list>
</v-menu>
I want the dropdown menu to open centered to the The Society button instead of pushing to the right. The middle line of the drop-down should align with the center of the The Society button.