Foundation - Dropdown within dropdown

Using Foundation 5, I am trying to have a dropdown within a dropdown...

<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">Modify</a></li>
    <li class="has-dropdown" ><a href="#">Share</a>
        <ul class="dropdown" >
            <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>
    </li> 
</ul>

But without any success! The Share menu, is always displaying under the Modify menu.

EDIT 1

I tried something else, it's better but not good enough:

<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">Modify</a></li>
      <li ><a data-dropdown="drop2"  href="#"  >Share</a>
          <ul id="drop2" class="f-dropdown content " 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>
     </li>
</ul>

And added to my .css:

    .f-dropdown.content {display: block;}

Here is my full css: http://pastebin.com/QPaFbenF with the previous line at line 67

But when clicking on Share, the More menu disapear and I have to put my mouse over the More link to get the the More menu and his sub-menu Share displayed.

I have found this question on the zurb forum : dropdown within dropdown and tried the answers, without any success :S

.f-dropdown.content will do nothing since you do not have a class named content under f-dropdown class

These should be in your CSS:

.has-dropdown ul {
  display: none;
}
.has-dropdown:hover ul {
  display: block;
}

Working Example