Ok here goes. the off Canvas does display the menu however i need it to function as a dropdown for the categories selected. What it does instead is just adds them to the menu just like a regular item. i have tried using the zurb code and still get the same results

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
   
     <button type="button" class="button large hollow float-right" data-close="offCanvas"><i class="fi-x large"></i></button>
<ul class="vertical menu">
      <li>
        <a href="#">Item 1</a>
        <ul class="vertical menu dropdown">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
</div>

so instead of being able to click on item1 to open the dropdown all the other items (a to e) are already opened and stay that way. This all used to work in foundation 5 So am i missing something ?