Pionowe menu, Problem z transformacją Opcje

[lidl]

Witam. Mam problem z pionowym menu. Chciałbym aby submenu wyjeżdżało dokonując transformacji a wysokość pola pod submenu zajmowała 100% wysokości strony.
Samo menu działa. Może ktoś wie gdzie robię błąd.

[HTML] pobierz, plaintext 
<div id="nav">
    <ul class="top-level">
        <li><a href="#">Home</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
		<li><a href="#">Contact</a></li>
    </ul>
</div>
 
<style>
#nav{ 
font-size:0.75em; 
width:150px; 
}
 
#nav ul { 
margin:0px; 
padding:0px; 
}
 
#nav li { 
list-style: none; 
}
 
/* tlo glowne */
ul.top-level { 
background:#666; 
}
/* style kafelkow top */
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}
 
#nav a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
 
/* ogolny hover */
#nav a:hover{
 text-decoration:underline;
}
 
#nav li:hover {
 background: #f90;
 position: relative; 
}
 
ul.sub-level {
    display: none;
    width:0px;
      /* Animacja */
    -moz-transition-duration:1s;
    -moz-transition-timing-function:cubic-bezier(0,0.5,1,0.5);
}
 
/* hover sublevel */
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 0px;
    display: block;
    position: absolute;
    left: 150px;
    top: 0px;
	width:150px;
 
}
 
/* gabaryty sublevel */
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
 
}
 
</style>
[HTML] pobierz, plaintext