CODEWITHSUNDEEP
htmlcssdrop-down-menuzurb-foundation
Erwan
Erwan

Reputation: 1073

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

Upvotes: 1

Views: 2089

Answers (3)

Janaka R Rajapaksha
Janaka R Rajapaksha

Reputation: 3744

.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

Upvotes: 3

wharfdale
wharfdale

Reputation: 752

I had the same issue, and I realised I simply didn't include the jQuery trigger to get all the dropdown etc elements via the dropdown.js file working.

<script>
    $(document).foundation();
</script>

Upvotes: 0

Jascha Goltermann
Jascha Goltermann

Reputation: 1124

Nested dropdown menus tend to get complicated when you start from scratch. I would always recommend to start with superfish. You can a see a working demo here: http://users.tpg.com.au/j_birch/plugins/superfish/examples/

Upvotes: 0

Related Questions