title: css side vertical menu transition
body: <p>Searched a lot but dint get specific answer. I am creating a website where i want to use a side bar.I want the side bar to expand to right on hover as shown below......Before  <a href="https://i.stack.imgur.com/vZ3ZY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vZ3ZY.png" alt="enter image description here"></a></p>
  
  <p>After </p>
  
  <p><a href="https://i.stack.imgur.com/4qtTz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4qtTz.png" alt="enter image description here"></a></p>
  
  <p>and the code </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>.body {
   margin :0;
   border :0;
   
  }
  * {
   box-sizing : border-box;
  }
  .main-header {
   position : absolute ;
   width : 100% ;
   height : 44px;
   background-color : #999;
   z-index:4;
   
  }
  
  .main-content {
   padding-top :46px;
   
  }
  
  .side-nav {
   position : absolute;
   width:100% ;
   background-color:#666;
   height:100vh;
   z-index:3;
   padding-top:44px;
   
  }
  
  .side-nav ul {
   list-style :0;
   padding :0;
   margin:0;
  }
  
  .side-nav ul li {
   padding : 20px 10px;
   border-bottom :1px solid #333;
  }
   
  .side-nav ul li a {
   color:#fff;
   text-decoration : none;
   
  }
  
  .side-nav ul li a i {
   color: #333;
  }
  
  @media screen and (min-width: 600px)
  {
   .side-nav {
   width :80px;
   }
   
   .side-nav ul li {
   text-align: center;
   }
   
   .side-nav ul li span:nth-child(2) {
   display:none;
   }
   
   .side-nav ul li i {
   font-size:  26px;
   }
   
   .main-content {
   
   margin-left:85px;
   }
   
  }
  
  @media screen and (min-width: 1000px)
  {
   
   .side-nav{
   width:200px;
   }
   .side-nav ul li {
   text-align :left;
   }
   .side-nav ul li span:nth-child(2) {
   display:inline;
   }
   
   .main-content {
   
   margin-left:205px;
   }
   
   
   
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;script src="javascripts/jquery2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel='stylesheet' href="css/myCss.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="main-header"&gt;
  &lt;a href="#" class="nav-trigger"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  
   &lt;div class="side-nav"&gt;
    &lt;nav&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt; &lt;span&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span&gt;xyz&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt; &lt;span&gt;&lt;i class="fa fa-hourglass-2"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span&gt;sbc&lt;/span&gt;
  
      &lt;/a&gt;&lt;/li&gt;
      
      &lt;li&gt;&lt;a href="#"&gt; &lt;span&gt;&lt;i class="fa fa-hourglass-2"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span&gt;Option 3&lt;/span&gt;
  
      &lt;/a&gt;&lt;/li&gt;
      
      &lt;li&gt;&lt;a href="#"&gt; &lt;span&gt;&lt;i class="fa fa-hourglass-2"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span&gt;Option 4&lt;/span&gt;
  
      &lt;/a&gt;&lt;/li&gt;
      
  
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/div&gt;
  
   &lt;div class="main-content"&gt;
    &lt;p&gt;asjjasjlasj&lt;/p&gt;
   &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do i do that using css and js with a nice transition .Thank you</p>