title: How to add Smooth CSS drop down menu
body: <p>I managed to create a menu with drop-down-menu (sub menu) using CSS. But I can't able to add smooth drop down-menu effect to my coding. I tried to add -moz-transition and more. I didn't know where to add those transition to make my normal drop-down-menu as smooth drop down-menu effect. </p>
  
  <p>Below is my HTML coding </p>
  
  <pre><code>&lt;div id='cssmenu'&gt;
  &lt;ul&gt;
     &lt;li class='active'&gt;&lt;a href='index.html'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
           &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Product 1&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Product 2&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>&lt;style media="screen" type="text/css"&gt;
      #cssmenu ul,
      #cssmenu li,
      #cssmenu span,
      #cssmenu a {
        margin: 0;
        padding: 0;
        position: relative;
      }
      #cssmenu {
        height: 49px;
        border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        background: #fefefe;
        background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
        background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
        background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
        background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
        background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
        border-bottom: 2px solid #db000b;
        width: auto;
      }
      #cssmenu:after,
      #cssmenu ul:after {
        content: '';
        display: block;
        clear: both;
      }
      #cssmenu a {
        background: #fefefe;
        background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
        background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
        background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
        background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
        background: linear-gradient(top, #fefefe 0%, #ececec 100%);
        color: #000;
        display: inline-block;
        font-family: Helvetica, Arial, Verdana, sans-serif;
        font-size: 12px;
        line-height: 49px;
        padding: 0 20px;
        text-decoration: none;
      }
      #cssmenu ul {
        list-style: none;
      }
      #cssmenu &gt; ul {
        float: left;
      }
      #cssmenu &gt; ul &gt; li {
        float: left;
      }
      #cssmenu &gt; ul &gt; li &gt; a {
        color: #000;
        font-size: 12px;
      }
      #cssmenu &gt; ul &gt; li:hover:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 50%;
        bottom: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #db000b;
        margin-left: -10px;
      }
      #cssmenu &gt; ul &gt; li:first-child &gt; a {
        border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
      }
      #cssmenu &gt; ul &gt; li.active:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 50%;
        bottom: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #db000b;
        margin-left: -10px;
      }
      #cssmenu &gt; ul &gt; li.active &gt; a {
        -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
        background: #ececec;
        background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
        background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      }
      #cssmenu &gt; ul &gt; li:hover &gt; a {
        background: #ececec;
        background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
        background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
        -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      }
      #cssmenu .has-sub {
        z-index: 1;
      }
      #cssmenu .has-sub:hover &gt; ul {
        display: block;
      }
      #cssmenu .has-sub ul {
        display: none;
        position: absolute;
        width: 200px;
        top: 100%;
        left: 0;
      }
      #cssmenu .has-sub ul li {
        *margin-bottom: -1px;
      }
      #cssmenu .has-sub ul li a {
        background: #db000b;
        border-bottom: 1px dotted #ff0f1b;
        filter: none;
        font-size: 11px;
        display: block;
        line-height: 120%;
        padding: 10px;
        color: #ffffff;
      }
      #cssmenu .has-sub ul li:hover a {
        background: #a80008;
      }
      #cssmenu .has-sub .has-sub:hover &gt; ul {
        display: block;
      }
      #cssmenu .has-sub .has-sub ul {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
      }
      #cssmenu .has-sub .has-sub ul li a {
        background: #a80008;
        border-bottom: 1px dotted #ff0f1b;
      }
      #cssmenu .has-sub .has-sub ul li a:hover {
        background: #8f0007;
      }
      &lt;/style&gt;
  </code></pre>