title: CSS Menu Transition
body: <p>JSFiddle: <a href="http://jsfiddle.net/x6bM3/" rel="nofollow">http://jsfiddle.net/x6bM3/</a></p>
  
  <p>If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing. 
  I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help,  </p>
  
  <p>Thanks in advance, 
  Adam</p>
  
  <p>CSS:</p>
  
  <pre><code>nav ul ul {
      display: none;
  }
  nav ul li:hover &gt; ul {
      display: block;
  }
  nav ul {
      list-style: none;
      position: relative;
      display: inline-table;
      margin-top: 23px;
      padding: 0;
      float: left;
  }
  nav ul:after {
      content:"";
      display: block;
  }
  nav ul li {
      float: left;
      height: 50px;
      width: auto;
      padding: 5px;
      margin-left: 22px;
  }
  nav ul li a {
      display: block;
      text-decoration: none;
  }
  nav ul ul {
      background: #363c43;
      border-radius: 3px;
      border: 1px solid #2e363f;
      padding: 7px;
      position: absolute;
      font-size: 0.9em;
  }
  nav ul ul:before {
      content:'';
      display:block;
      width:0;
      height:0;
      position:absolute;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      border-bottom:10px solid #363c43;
      top:-8px;
      left: 30px;
  }
  nav ul ul li {
      height: 30px;
      float: none;
      position: relative;
      padding: 0px 0px 5px 0px;
      margin: 0px;
  }
  /* Other base styles */
   * {
      font-family: arial;
  }
  a:link, a:visited {
      color: #979797;
      font-size: 1.145em;
      /* 18px */
      text-decoration: none;
      font-weight: lighter;
      -webkit-transition: all .25s linear;
      transition: color .25s linear;
  }
  a:hover {
      color: #c4c1c1;
      font-size: 1.145em;
      /* 22px */
      text-decoration: none;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;products&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;product 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;product 2&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;solutions&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>