title: CSS Vertical JQuery Menu
body: <p>Where I'm at currently - <a href="http://officialspeed.tk/projects/" rel="nofollow">http://officialspeed.tk/projects/</a></p>
  
  <p>ok to get a better understanding of what I'm trying to learn you can head <a href="http://officialspeed.tk/projects/" rel="nofollow">here</a> to see where I'm at.</p>
  
  <p>I wanna hover over the lists and have it so the background slides from being transparent to it's current background color from left to right.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <p><strong>The CSS</strong></p>
  
  <pre><code>body {
      background-color:#222;}
  
  a {
      transition:all 200ms ease-in-out;
      -webkit-transition:all 200ms ease-in-out;
      -moz-transition:all 200ms ease-in-out;
      -o-transition:all 200ms ease-in-out;}
  
  div#download a {
      position:absolute;
      bottom:0px;
      right:0px;
      width:auto;
      height:auto;
      color:#555;
      text-decoration:none;
      padding:0px 5px 5px 0px;}
  
  div#download a:hover {
      position:absolute;
      bottom:0px;
      right:0px;
      width:auto;
      height:auto;
      color:#FFF;}
  
  div#navigation {
      position:absolute;
      top:0px;
      left:0px;
      width:200px;
      height:100%;
      background-color:#333;
      box-shadow:0px 0px 16px #000;}
  
  ul#nav {
      position:absolute;
      bottom:50%;
      width:80%;
      margin:auto;
      list-style:none;
      margin:0px;}
  
  ul#nav li {
      color:#FFF;
      background-color:#666;
      border-bottom:1px solid #333;
      padding:0px 0px 0px 20px;
      margin:0px 0px 5px -40px;}
  
  ul#nav li a {
      color:#999;
      text-decoration:none;}
  
  ul#nav li a:hover {
      color:#FFF;}
  </code></pre>
  
  <p><strong>The index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Simple Learning Project&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="download"&gt;
          &lt;a href="jquery-flash-like-menu.zip"&gt;Download Source!&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navigation"&gt;
          &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Software&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>