I'm trying to be able to toggle these sub menus one at a time, I'm getting lost in nests and cant quite figure out how to target the correct list item,

I found that I should be using `find()` instead of `children()` as it can go deeper in the nest but still no luck in getting it working.

```
    <ul>
      <li>Profile</li>
      <li>Edit</li>
      <li class="drop-nav"> <a href="#"> See your products</a>  
        <ul>                                      
          <li class="drop-nav"> <a href="#"> Mens </a>        
            <ul>
              <li>  <a href="#"> jumpers </a> </li>
              <li>  <a href="#"> t shirts </a> </li>
            </ul>
          </li>
          <li class="drop-nav"> <a href="#">Womens</a>           
            <ul>                          
              <li> <a href="#"> hoodies </a> </li>
              <li> <a href="#"> leggings </a> </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

 $(".drop-nav").on("click", function(e){
   e.preventDefault();

   });

 li ul{
 display: none;
  }

```