title: CSS Animation on Sidebar Submenu
body: <p>I've been trying to figure this out, but I'm honestly lost. I'm making a sidebar that has three levels: a main menu, with two more submenus when you hover over the menu items(so it's main menu item > submenu item > another submenu). The thing is, I'm not very good with CSS animations, but I'm trying to learn. And was wondering if this could be done with it?</p>
  
  <p>Here's my code so far. Initially, I started this out with JS, but stackoverflow told me it'd be easier to do it with CSS animation. And honestly, this looks way cleaner. Anyway, currently, it shows the icon titles beside it when you hover over a sidebar. But how exactly should I go about making the submenu appear when you hover over each menu item separately? Should I do it by having a whole new div appear on hover, or should I do it by expanding the existing one(this doesn't seem like it'd be a good idea)? </p>
  
  <p>What's the correct way? And on which elements should I add CSS transitions to achieve that smooth slidein sidebar?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    /* .subnav {
        position: fixed;
        background-color: red;
        margin-top: 0;
        top: 75px;
        left: 75px;
        height: 100vw;
      }
      my poor attempt at submenu */
      
      .sidebar {
        margin-top: 75px;
        position: fixed;
        width:75px;
        height:100vw;
        top:0;
        left:0;
        z-index:100;
        background-color: #292a2c;
        color: #000;
        overflow: hidden;
        transition: width .5s;
      }
      
      .sidebar:hover {
        width: 160px;
      }
      .sidebar ul {
        width:200px;
      }
      .sidebar a i {
        font-size: 30px;
      }
      .sidebar a {
        color:#fff;
        font-size:14px;
        text-decoration:none;
      }
      .nav-item {
        padding-left: 8px;
      }
      .nav-item:hover {
        background-color: $primary-color;
      }
      span {
        display: none;
        font-size: 14px;
      }
      .sidebar:hover span {
          display: initial;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sidebar"&gt;
    &lt;ul class="nav flex-column m-0"&gt;
      &lt;li class="nav-item py-2"&gt;
        &lt;a class="nav-link" href="#"&gt;
          &lt;i class="fa fa-envelope-open" aria-hidden="true"&gt;&lt;/i&gt; 
          &lt;span class="pl-1"&gt;
            Item
          &lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="nav subnav flex-column"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" href="#"&gt;
              Overview 
              &lt;span class="sr-only"&gt;
                (current)
              &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Reports&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Analytics&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Export&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>