foundation-sites-5/spec/dropdown/miss.html

**This package is only for versions 5 and earlier of Foundation. As of version 6, the package has a new name: `foundation-sites`.**

<!-- to test this correctly, set the window width to 650 -->
<div class="row" style="max-width:650px">
  <div class="small-12 columns">
    <p>
    <a href="#" style="width:20%" class="button" data-options="align:top" data-dropdown="missTop" aria-controls="missTop" aria-expanded="false">missTop</a>
    <span style="display:inline-block;width:55%">&nbsp;</span>
    <a href="#" style="width:20%" class="button" data-options="align:right" data-dropdown="missRight" aria-controls="missRight" aria-expanded="false">missRight</a>
    </p>
    <p>
    <a href="#" style="width:20%" class="button" data-options="align:left" data-dropdown="missLeft" aria-controls="missLeft" aria-expanded="false">missLeft</a>
    <span style="display:inline-block;width:10%">&nbsp;</span>
    <a href="#" style="width:20%" class="button" data-options="align:left" data-dropdown="left" aria-controls="left" aria-expanded="false">Left</a>
    </p>
    <p>
    <span style="display:inline-block;width:30%">&nbsp;</span>
    <a href="#" class="button" data-dropdown="trigRight" aria-controls="trigRight" aria-expanded="false">trigRight</a>
    </p>
    <p>
    <a href="#" class="button" data-options="align:top" data-dropdown="top" aria-controls="top" aria-expanded="false">Top</a>
    </p>
    <p>
    <a href="#" class="button" data-options="align:right" data-dropdown="right" aria-controls="right" aria-expanded="false">Right</a>
    </p>
    <div id="dropdowns">
<ul id="missTop" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
</ul>
<ul id="missRight" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<ul id="missLeft" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<ul id="left" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<div id="trigRight" class="f-dropdown content medium" data-dropdown-content aria-hidden="true" tabindex="-1">
  <h4>Title</h4>
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
  <img width="300" height="300" src="nonexistent.jpg" alt="a flying comment">
  <p>More test.</p>
</div>
<ul id="top" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<ul id="right" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
    </div>
  </div>
</div>