multi level in sidenav items

<li>
 <ul class="collapsible collapsible-accordion">
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li>
 <ul class="collapsible collapsible-accordion">
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Submit listing</a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">For bloggers</a>
 </li>
 <li><a href="#" class="waves-effect">For author</a>
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </li>
 <li><a href="#" class="waves-effect">Registration form</a>
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </li>

<div class="collapsible-body">
  <ul>
    <li><a href="#" class="waves-effect">Submit listing</a></li>
    <li><a href="#" class="waves-effect">Registration form</a></li>
  </ul>
</div>

hi, thanks for the answer, the code that you provided me doesn't work in second level:

<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">For bloggers</a>
 </li>
 <li>
 <a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> For authors<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Submit listing</a></li>
 <li><a href="#" class="waves-effect">Registration form</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </li>