title: How to attach a Vuetify v-menu to its parent element in a scrollable list?
body: <p>In my project, I have a scrollable list of items, and each item has a menu that is opened when its activator button is hovered.</p>
  
  <p>By default, v-menu elements are attached to the v-app element, which serves as a mounting point for many Vuetify elements. When I use this default behavior, the generated HTML contains many detached div elements for the popup menu, one per item in the list, in the generated v-app div:</p>
  
  <pre><code>&lt;div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is impacting the reading of the rendered DOM, and the result is a bit messy especially when debugging.</p>
  
  <p>Also, once the menu is opened, and the list is scrolled, the menu remains at a fixed position and therefore gets visually detached from its activator button.</p>
  
  <p>How could I attach the menu to each item of the list in order to have a more readable rendered DOM (see below)?</p>
  
  <pre><code>&lt;my-list&gt;
    &lt;my-item&gt;
      &lt;div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"&gt;&lt;/div&gt;
    &lt;/my-item&gt;
  &lt;/my-list&gt;
  </code></pre>
  
  <p>And how can I have the v-menu stick to its activator button when the list is scrolled?</p>