Manipulating nav menu with jquery

Question

I'm a JavaScript beginner trying to solve 3 problems:

1. Upon clicking the parent <li>, the proper <sub> child's content doesn't appear. Notice that for each <li> category, i.e. "colors, shapes, sizes" there is an appropriate constituent child <sub> category. i.e. "green, circle, large"; however, upon clicking the the <li>, "large" appears as the content for each <sub> tag. How do I display the corresponding content upon clicking a given <li>?

2. My current code only toggles-off the previous click's content upon clicking the given <li> a second time. I'd like to not only toggle-off the li's display upon its second click, but also toggle-off the li's display upon clicking a different <li> whilst concurrently displaying the newly-clicked li's content.

3. I'm trying to smoothly transition (slide) the <sub> content out from behind the <ul>. I've tried doing so using the "transition" property but to no avail; upon clicking an <li> element, the <sub> just appears, but I'd like it to slide out.

JS Fiddle: https://jsfiddle.net/6sapmodc/2/

HTML

<blue>
  <ul>
    <li>Colors
      <sub>Green</sub>
    </li>
    <li>Shapes
      <sub>Circle</sub>
    </li>
    <li>Sizes
      <sub>Large</sub>
    </li>
  </ul>
</blue>

CSS

blue {
    float: left;
    background-color: orange;
    height: 80px;
    position: absolute;
    z-index: initial;
}

blue ul {
    list-style: none;
    background-color: gray;
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

blue ul li {
    height: 60px;
    width: 60px;
    background-color: red;
    text-align: center;
    line-height: 60px;
}

blue ul li:hover {
    cursor: pointer;
}

blue ul li sub {
    position: absolute;
    background-color: pink;
    width: 300px;
    height: 50px;
    z-index: -4;
    top: 0;
    display: none;
}

Jquery

$(document).ready(function()
{
    $("li").click(function()
    {
        $("sub").toggle();
    });
});

Answer 1

1) For this point you have to use $(this) to reference the clicked <li> element and then use find("sub") to get the proper <sub> child.

2) and 3) are approaching detecting the current visible <sub> element, slide it out with toggle("slide") and then show the related <sub> of the clicked <li> element.

You can check next example:

$(document).ready(function()
{
   $("li").click(function()
   {
       var clickedSub = $(this).find("sub");

       // If there are no visible sub elements,
       // then just show the clicked one.
       
       if ($("sub:visible").length == 0 || clickedSub.is(":visible"))
       {
           clickedSub.toggle("slide");
           return;
       }
       
       // Otherwise, first hide the current visible element,
       // and then show the sub of the clicked element.
       
       $("sub:visible").toggle("slide").queue(function()
       {
           clickedSub.toggle("slide");
           $(this).dequeue();
       });
   });
 
});

blue {
    float: left;
    background-color: orange;
    height: 80px;
    position: absolute;
    z-index: initial;
}
blue ul {
    list-style: none;
    background-color: gray;
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
blue ul li {
    height: 60px;
    width: 60px;
    background-color: red;
    text-align: center;
    line-height: 60px;
}
blue ul li:hover {
    cursor: pointer;
}
blue ul li sub {
    position: absolute;
    background-color: pink;
    width: 300px;
    height: 50px;
    z-index: -4;
    left: 180px;
    top: 0;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<blue>
    <ul>
        <li>Colors
          <sub>Green</sub>
        </li>
        <li>Shapes
          <sub>Circle</sub>
        </li>
        <li>Sizes
          <sub>Large</sub>
        </li>
    </ul>
</blue>