Drop down Navigation Menu

[-Karl-]

I have my CSS

#nav :hover ul.sub {left:20px; top:30px; width:152px;  z-index:300;}
#nav :hover ul.sub1 { width:152px;  z-index:300;}
#nav :hover ul.sub li {display:block; height:20px; padding:0; margin:0; float:left; width:152px; font-weight:normal;}
#nav :hover ul.sub li a {border-bottom: 1px solid #a07c3c;display:block; height:19px; width:152px;  text-decoration:none; padding:0; cursor:pointer;}
#nav :hover ul li a.link { border-top: 1px solid #a07c3c; padding:0;}
#nav :hover ul li span b {display:block;font-weight:normal;line-height:20px; height:20px;background: url('../images/nav-left-title.png'); padding:0;}
#nav :hover ul li a {background: #d5c29a; border-top: 1px solid #a07c3c; padding:0;}

and my HTML

<ul id="nav">    
    <li class="top"><a href="#nogo5" class="back"><b><img src="/rhnew/images/skills-icon.png" alt="Skills"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><span class="top"><b>Free to Play</b></span></li>
                <li><a href="/rhnew/skills" class="link"><b>Attack</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Cooking</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Crafting</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Firemaking</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Fishing</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Hitpoints</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Magic</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Mining</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Prayer</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Ranged</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Runecrafting</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Strength</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Woodcutting</b></a></li>            
            <li><span class="top"><b>Pay to Play</b></span></li>
                <li><a href="/rhnew/skills" class="link"><b>Agility</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Farming</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Fletching</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Herblore</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Slayer</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Summoning</b></a></li>
                <li><a href="/rhnew/skills" class="link"><b>Thieving</b></a></li>

        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>

At the moment, it lists the items under one column.

Free to Play
Attack
Cooking

Pay to Play
etc

What I want to do is, have two menus.

So it will go:

Free to Play
Free to Play >
Attack
Cooking
Pay to Play
Pay to Play >
etc

[-Karl-]

Anyone got any ideas?