vertical menu css

Hi,

I'd like to do a vertical menu with css like this:
http://www.newmediacampaigns.com/files/images/nicer-navigation-with-css-transitions/demo.html

I know there are many programs that can do this but I wish to learn css more in-depth and I'd like to hand-code it.

I'm just attaching the main code.

Thank you,
Victor

#trans-nav2 { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav2 { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav2 li { float: left; position:relative; padding: 0; line-height: 40px; background: #5a8078 url(nav-bg.png) repeat-x 0 0; }
#trans-nav2 li:hover { background-position: 0 0px; }
#trans-nav2 li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav2 li a:hover { color: #a3f1d7; }
#trans-nav2 li ul { opacity: 0; position:absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#trans-nav2 li:hover ul { opacity: 1; }
#trans-nav2 li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav2 li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav2 li ul li a { background: #63867f; }
#trans-nav2 li ul li a:hover { background: #5a8078; }

<ul id="trans-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Widgets</a></li>
                        <li><a href="#">Thingamabobs</a></li>
                        <li><a href="#">Doohickies</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>

Select allOpen in new window