title: Smooth scroll down of submenu on main menu hover using css
body: <p>I am trying to get a smooth drop-down transition to the sub-menu items on hovering the main-menu item. Initially the sub-menu is hidden and on hover of main-menu item the sub-menu displays, but not a smooth drop-down. Here is a fiddle <a href="http://jsfiddle.net/97mgV/1/" rel="nofollow">http://jsfiddle.net/97mgV/1/</a></p>
  
  <p>No Jquery/Javascript please</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="main-menu"&gt;
      &lt;li&gt; &lt;a href=""&gt;Menu 1&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li &gt;Sub menu 1.1&lt;/li&gt;
              &lt;li&gt;Sub menu 1.2&lt;/li&gt;
              &lt;li&gt;Sub menu 1.3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Menu 2&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;Sub menu 2.1&lt;/li&gt;
              &lt;li&gt;Sub menu 2.2&lt;/li&gt;
              &lt;li&gt;Sub menu 2.3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Menu 3&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;Sub menu 3.1&lt;/li&gt;
              &lt;li&gt;Sub menu 3.2&lt;/li&gt;
              &lt;li&gt;Sub menu 3.3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Menu 4&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;Sub menu 4.1&lt;/li&gt;
              &lt;li&gt;Sub menu 4.2&lt;/li&gt;
              &lt;li&gt;Sub menu 4.3&lt;/li&gt;
              &lt;li&gt;Sub menu 4.4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Menu 5&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;Sub menu 5.1&lt;/li&gt;
              &lt;li&gt;Sub menu 5.2&lt;/li&gt;
              &lt;li&gt;Sub menu 5.3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul{
      list-style:none;
      padding:0;
  }
  a{
      text-decoration:none;
      display:block;
  }
  
  .main-menu{
      width:50%;
      margin-left:15%;
  }
  .sub-menu{
      display:none;
      background-color:#D7D5D5;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  .sub-menu li{
      padding: 3px 8px;
  }
  
  .main-menu &gt; li &gt; a{
      background-color:#4D4A4A;
      color:#fff;
      border-bottom: 1px solid #3D3B3B;
      border-radius:2px;
      padding: 5px 10px;
      font-size:18px;
  }
  
  .main-menu li:hover &gt; ul{
      display:block;
  }
  </code></pre>