title: Foundation 6 dropdown
body: <p>I'm trying to create a drop down, the content of which is MOSTLY the same despite having multiple different anchors on the same screen.</p>
  
  <p>So, rather than creating lots of duplicate content, I want to have the actual dropdown pane coded once in the footer, with several anchors referring to it.</p>
  
  <p>The drop down pane:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="authorList" class="dropdown-pane" data-contextid data-options="hover: true; hoverDelay: 1000; hoverPane: true; closeOnClick: true" data-dropdown&gt;
  Some content in the dropdown pane here, that is for the most part the same, no  matter whichever anchor triggers it to display.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then there are say 10 books per page that will have this exact same dropdown display next to them, when you hover over the anchoring button:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-bookid="1"&gt;Book 1 &lt;span class="button" data-toggle="authorList"&gt;More info...&lt;/span&gt;&lt;/div&gt; 
  &lt;div data-bookid="2"&gt;Book 2 &lt;span class="button" data-toggle="authorList"&gt;More info...&lt;/span&gt;&lt;/div&gt;
  &lt;div data-bookid="3"&gt;Book 3 &lt;span class="button" data-toggle="authorList"&gt;More info...&lt;/span&gt;&lt;/div&gt;
  ....
  &lt;div data-bookid="10"&gt;Book 10 &lt;span class="button" data-toggle="authorList"&gt;More info...&lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Currently the dropdown shows, but it only appears next to Book 1. I need it to display next to whichever anchor is hovered to trigger it. If that makes sense.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks</p>