I have a drop down menu with two rows of v-list items as shown below.
<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 need this menu to open centre to the The Society button and not pushing to the right as it does presently. So the middle line of the drop down should be centre to the The Society button.