title: Slide-out menu with CSS transitions
body: <p>I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a <code>ul</code> tag inside the link I want to expand and absolute-positioning it on hover, with <code>display:none</code> when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:</p>
  
  <pre><code>&lt;aside&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Link Text&lt;/a&gt;&lt;/li&gt;
      &lt;li class="more"&gt;
        &lt;a href=""&gt;Base&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="Sublink"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/aisde&gt;
  </code></pre>
  
  <p>The <code>aside</code> tag is itself a secondary navigation menu, the main one is in my header. It is <code>position:fixed</code> for easy access while scrolling.</p>
  
  <p>The <code>ul</code> tag inside of <code>&lt;li class="more"&gt;</code> is absolutely positioned, anchored to -1px on the top and <code>width:154px</code>, and on hover it becomes <code>display:block; left:154px</code> (of course, it is <code>display:none</code> when inactive). I have tried transitioning the <code>left</code> property, but it does not change anything, it acts as if my transition weren't even there.</p>