title: Foundation - Dropdown within dropdown
body: <p>Using Foundation 5, I am trying to have a dropdown within a dropdown...</p>
  
  <pre><code>&lt;a href="#" data-dropdown="drop1" data-options="is_hover:true" &gt;More&lt;/a&gt;
  &lt;ul id="drop1" class="f-dropdown" data-dropdown-content&gt;
      &lt;li&gt;&lt;a href="#"&gt;Modify&lt;/a&gt;&lt;/li&gt;
      &lt;li class="has-dropdown" &gt;&lt;a href="#"&gt;Share&lt;/a&gt;
          &lt;ul class="dropdown" &gt;
              &lt;li&gt;&lt;a href="#"&gt;This is a link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;This is another&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Yet another&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p>But without any success!
  The <code>Share</code> menu, is always displaying under the <code>Modify</code> menu.</p>
  
  <p><strong><em>EDIT 1</em></strong></p>
  
  <p>I tried something else, it's better but not good enough:</p>
  
  <pre><code>&lt;a href="#" data-dropdown="drop1" data-options="is_hover:true" &gt;More&lt;/a&gt;
  &lt;ul id="drop1" class="f-dropdown" data-dropdown-content&gt;
      &lt;li&gt;&lt;a href="#"&gt;Modify&lt;/a&gt;&lt;/li&gt;
        &lt;li &gt;&lt;a data-dropdown="drop2"  href="#"  &gt;Share&lt;/a&gt;
            &lt;ul id="drop2" class="f-dropdown content " data-dropdown-content  &gt;
                &lt;li&gt;&lt;a href="#"&gt;This is a link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;This is another&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Yet another&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And added to my .css:</p>
  
  <pre><code>    .f-dropdown.content {display: block;}
  </code></pre>
  
  <p>Here is my full css: <a href="http://pastebin.com/QPaFbenF" rel="nofollow">http://pastebin.com/QPaFbenF</a> with the previous line at line 67</p>
  
  <p>But when clicking on <code>Share</code>, the <code>More</code> menu disapear and I have to put my mouse over the <code>More</code> link to get the the <code>More</code> menu and his sub-menu <code>Share</code> displayed.</p>
  
  <p>I have found this question on the zurb forum : <a href="http://foundation.zurb.com/forum/posts/1294-dropdown-within-dropdown" rel="nofollow">dropdown within dropdown</a> and tried the answers, without any success :S</p>