Vertical CSS drop down menu

HTML Code

<div id="trans">
      <ul>
      <li><a href="../">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
      </ul>
    <div>

CSS Code

<style>
    #trans {width: 21%; float: left; color: #000; background: #cdcdcd;}
    #trans ul {margin: 0em; padding: 0em; list-style: none;}
    #trans ul li {display: inline;}
    #trans a {text-align: center; text-decoration: none; display: block; width: 96%; color: #fff;
      background: #990000; border-left: #cc0000 3px solid; border-top: #cc0000 4px solid; 
      border-right: #000 3px solid; border-bottom: #000 3px solid;}
    #trans a:hover {background: #b87333; color: #fff; border-left: #000 3px solid; 
      border-top: #000 4px solid; border-right: #ffbb99 3px solid; border-bottom: #ffbb99 3px solid;}
</style>