title: -webkit-transition with display
body: <p>Is there a way to use <code>-webkit-transition</code> with <code>display</code>?</p>
  
  <p>I'm using CSS <code>display</code> to hide and show a navigations second level … but only <code>display: none</code> and <code>display: block</code> on <code>:hover</code> is a little un-sexy… a <code>ease</code> would be great (like <code>-webkit-transition: display 300ms ease-in;</code>)</p>
  
  <p>I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on)</p>
  
  <p>here's some code &amp; structure: (the <code>li.menu1</code> has a <code>:hover</code> with <code>section.nav-menu1 {display: block;}</code>)</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="menu1"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
          &lt;section class="nav-menu1"&gt;
              &lt;h1 class="none"&gt;Level 2 Overlay&lt;/h1&gt;
              &lt;nav&gt;
                  &lt;h2 class="none"&gt;Menu 1 Navigation&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu 1 Level 2-1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu 1 Level 2-2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu 1 Level 2-3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/section&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>