title: Adding transition to CSS
body: <p>I want to add smooth animated transition to drop down in this CSS. Which code and where I should place? I have tried some "webkit-transition" variants but none worked with my skills in programming. Anyone can solve this problem?</p>
  
  <pre><code>  ul.jb_free_dropdown,
      ul.jb_free_dropdown li,
      ul.jb_free_dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
  
      ul.jb_free_dropdown {
        position: relative;
        z-index: 597;
        float: left;
      }
  
      ul.jb_free_dropdown li {
        float: left;
        min-height: 1px;
        line-height: 1.3em;
        vertical-align: middle;
  
      }
  
      ul.jb_free_dropdown li.hover,
      ul.jb_free_dropdown li:hover {
        position: relative;
        z-index: 599;
        cursor: default;
      }
  
      ul.jb_free_dropdown ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
  
      }
  
      ul.jb_free_dropdown ul li {
        float: none;
  
      }
  
      ul.jb_free_dropdown ul ul {
        top: 0px;
        left: 100%;                
      }
  
      ul.jb_free_dropdown li:hover &gt; ul {
        visibility: visible;
      }
  
  
      /* -- Base drop-down styling -- */
  
      ul.jb_free_dropdown {
        font-weight: bold;
      }
  
          ul.jb_free_dropdown li {
           padding: 7px 10px;
           border-style: solid;
           border-width: 1px 1px 1px 0;
           border-color: #fff #d9d9d9 #d9d9d9;
           background-color: #f6f6f6;
           color: #000;
      }
  
          ul.jb_free_dropdown li.hover,
          ul.jb_free_dropdown li:hover,
          ul.jb_free_dropdown li.on {
           background-color: #eee;
           color: #000;
          }
  
          ul.jb_free_dropdown a:link,
          ul.jb_free_dropdown a:visited   { color: #000; text-decoration: none; }
          ul.jb_free_dropdown a:hover     { color: #000; background-color: #ececec;}
          ul.jb_free_dropdown a:active    { color: #000; }
  
          /* -- level mark -- */
  
          ul.jb_free_dropdown ul {
           width: 200px;
           margin-top: 1px;
          }
  
              ul.jb_free_dropdown ul li {
               font-weight: normal;
              }
  
  
  
  
  
  
      ul.jb_free_dropdown a,
      ul.jb_free_dropdown span {
       display: block;
       padding: 10px 20px;
       background-color: #ffffff;
       background-repeat: repeat-x;
  
      }
  
  
      /* -- Base style override -- */
  
      ul.jb_free_dropdown li {
       padding: 0;
       border: none;
      }
  
      /*
      JB
      */
      ul.jb_free_dropdown li li.parent a {
        background: #f4f4f4 url('../../media/images/arrow.png') right 10px no-repeat;
      }
  
      ul.jb_free_dropdown li li.parent li a {
        background: #f4f4f4;
      }
  
      ul.jb_free_dropdown li.parent a:hover {
        background-color: #ececec;
      }
  
  
      ul.jb_free_dropdown li.active a {
        background-color: #fff;
  
      }
      ul.jb_free_dropdown li.active li a {
        background-color: #f4f4f4;
  
  
      }
      ul.jb_free_dropdown li.active li a:hover {
        background-color: #ececec;
      }
  
  
  
      /*
      JB
      */
  
      ul.jb_free_dropdown ul a,
      ul.jb_free_dropdown ul span {
       padding: 8px;
      }
  
  
      /* -- Base style reinitiate: post-override activities -- */
  
  
  
  
      /* -- Custom styles -- */
  
      ul.jb_free_dropdown li.hover,
      ul.jb_free_dropdown li:hover {
       background: url(../../../../images/default/grad2.png) 0 100% repeat-x;
       color: #000;
       background-color: #fff;
      }
  
      ul.jb_free_dropdown li:hover {
        color: #fff;
      }
  
      ul.jb_free_dropdown li a:active {
        background: url(../../../../images/default/grad1.png) repeat-x;
      }
  
          ul.jb_free_dropdown ul {
           margin-top: 0;
  
          }
  
  
      /* -- Mixed -- */
  
      ul.jb_free_dropdown li a,
      ul.jb_free_dropdown *.dir {
       border-style: solid;
       border-width: 1px 1px 1px 0;
       border-color: #fff #d9d9d9 #d9d9d9;
      }
  
  
      /* -- Drop-down open -- */
  </code></pre>