Menu horizontal 2 níveis... para 3 níveis

Pessoal... como eu faço esse menu, que é de 2 níveis, ser de 3 níveis? Eu já tentei várias coisas mas o menu tá ficando embaixo e não do lado e não tá funcionando direito

<ul id="navigation" class="nav-main">
<li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)">Home</a></li>

 <li class="list"><a href="#">Freebies</a>
<ul class="nav-sub">
 <li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)category/backgrounds/">Backgrounds</a></li>
<li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)category/buttons/">Buttons</a></li>
<li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)category/graphics/">Graphics</a></li>
</ul>
</li>

 <li class="list"><a href="#">About</a>
<ul class="nav-sub">
 <li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)about/">About PSDGraphics</a></li>
 <li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)about/terms-of-use/">Terms Of Use</a></li>
</ul>
</li>

 <li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)advertise/">Advertise</a></li>
 <li><a href="[http://www.psdgraphics.com/](http://www.psdgraphics.com/)contact/">Contact</a></li>

</ul>

css

#navigation {
margin:0;
padding: 0;
clear:both;
width:950px;
height:51px;
background: #d6eaf8 url(images/dropdown-bg.gif) repeat-x left top;
}

ul.nav-main,
ul.nav-main li {

list-style: none;
margin: 0;
padding: 0;
}

ul.nav-main {

position: relative;
z-index: 597;
}

ul.nav-main li:hover > ul {

visibility: visible;
}

ul.nav-main li.hover,
ul.nav-main li:hover {

position: relative;
z-index: 599;
cursor: pointer;
background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}

ul.nav-main li {

float:left;
display:block;
height: 51px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
background: url(images/separator.gif) no-repeat right center;
}

ul.nav-main li a {

display:block;
padding: 16px 16px 0 16px;
height: 35px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}

ul.nav-main li a:hover {

color:#D6D6D6;
}

ul.nav-main *.list {

padding-right: 22px;
background: url(images/navigation-arrow.gif) no-repeat right top;
}

ul.nav-sub {

visibility: hidden;
position: absolute;
padding:10px;
top: 48px;
left: 0;
z-index: 598;
background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

ul.nav-sub li {

list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}

ul.nav-sub li a {

list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}